Rewrote all the docs - more noob friendly now.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+71
-73
@@ -1,52 +1,20 @@
|
||||
# Button
|
||||
|
||||
A styled `<button>` element. Supports six visual variants and four sizes. HTMX attributes can be injected directly via the `hxAttrs` parameter.
|
||||
A styled clickable button. Use it for form submissions, navigation actions, or triggering HTMX requests.
|
||||
|
||||
---
|
||||
|
||||
## HTML structure
|
||||
## Quick example
|
||||
|
||||
```
|
||||
button[type=$$Type$$, class=$$Classes$$, $$HxAttrs$$]
|
||||
$$Label$$
|
||||
```csharp
|
||||
new Button("Save changes", type: "submit")
|
||||
new Button("Cancel", variant: "outline")
|
||||
new Button("Delete", variant: "destructive")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS mechanics
|
||||
|
||||
**Base classes** (always applied):
|
||||
|
||||
```
|
||||
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium
|
||||
ring-offset-background transition-colors
|
||||
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
```
|
||||
|
||||
**Variant** appended:
|
||||
|
||||
| Variant | Added classes |
|
||||
|---|---|
|
||||
| `default` | `bg-primary text-primary-foreground hover:bg-primary/90` |
|
||||
| `destructive` | `bg-destructive text-destructive-foreground hover:bg-destructive/90` |
|
||||
| `outline` | `border border-input bg-transparent hover:bg-accent hover:text-accent-foreground` |
|
||||
| `secondary` | `bg-secondary text-secondary-foreground hover:bg-secondary/80` |
|
||||
| `ghost` | `hover:bg-accent hover:text-accent-foreground` |
|
||||
| `link` | `text-primary underline-offset-4 hover:underline` |
|
||||
|
||||
**Size** appended:
|
||||
|
||||
| Size | Added classes |
|
||||
|---|---|
|
||||
| `default` | `h-10 px-4 py-2 text-sm` |
|
||||
| `sm` | `h-9 rounded-md px-3 text-xs` |
|
||||
| `lg` | `h-11 rounded-md px-8 text-base` |
|
||||
| `icon` | `h-10 w-10` |
|
||||
|
||||
---
|
||||
|
||||
## Constructor signature
|
||||
## All the options
|
||||
|
||||
```csharp
|
||||
public Button(
|
||||
@@ -57,67 +25,97 @@ public Button(
|
||||
string hxAttrs = "")
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| Parameter | What it does |
|
||||
|---|---|
|
||||
| `label` | Button text (raw HTML — can include inline SVG) |
|
||||
| `variant` | Visual style; see table above |
|
||||
| `size` | Physical size; see table above |
|
||||
| `type` | HTML button type: `"button"` / `"submit"` / `"reset"` |
|
||||
| `hxAttrs` | Verbatim string appended as extra HTML attributes (HTMX, data-*, etc.) |
|
||||
| `label` | The button text. Can include raw HTML — useful for icons. |
|
||||
| `variant` | Visual style. See table below. |
|
||||
| `size` | How big the button is. See table below. |
|
||||
| `type` | HTML button type. Use `"submit"` for form submit buttons. Defaults to `"button"`. |
|
||||
| `hxAttrs` | Extra HTML attributes added verbatim — use this for HTMX, `disabled`, `data-*`, etc. |
|
||||
|
||||
**Variants:**
|
||||
|
||||
| Variant | Looks like |
|
||||
|---|---|
|
||||
| `default` | Filled with the primary colour — use for the main action on a page |
|
||||
| `destructive` | Red — use for irreversible actions like delete |
|
||||
| `outline` | Transparent with a border — use for secondary actions |
|
||||
| `secondary` | Muted fill — use for tertiary actions |
|
||||
| `ghost` | Invisible until hovered — use for toolbar buttons and icon actions |
|
||||
| `link` | Looks like a hyperlink with an underline on hover |
|
||||
|
||||
**Sizes:**
|
||||
|
||||
| Size | Dimensions |
|
||||
|---|---|
|
||||
| `sm` | Compact (36px tall) — good for dense UI |
|
||||
| `default` | Standard (40px tall) |
|
||||
| `lg` | Large (44px tall) — good for prominent CTAs |
|
||||
| `icon` | Square (40×40) — for icon-only buttons |
|
||||
|
||||
---
|
||||
|
||||
## Usage examples
|
||||
## Real-world examples
|
||||
|
||||
### Standard actions
|
||||
### Form submit button
|
||||
|
||||
```csharp
|
||||
new Button("Save changes", type: "submit")
|
||||
new Button("Cancel", variant: "outline")
|
||||
new Button("Delete", variant: "destructive")
|
||||
new Button("Learn more", variant: "link")
|
||||
new Button("Sign in", type: "submit")
|
||||
```
|
||||
|
||||
### Sizes
|
||||
### Confirm and cancel in a dialog footer
|
||||
|
||||
```csharp
|
||||
new Button("Small", size: "sm")
|
||||
new Button("Default", size: "default")
|
||||
new Button("Large", size: "lg")
|
||||
new Button("⚙", size: "icon") // icon-only square button
|
||||
var footer = """
|
||||
{cancelButton}
|
||||
{deleteButton}
|
||||
""";
|
||||
|
||||
// Pre-render each to HTML string and embed:
|
||||
string Render(IHtmxComponent c)
|
||||
{
|
||||
var w = new System.Buffers.ArrayBufferWriter<byte>();
|
||||
c.Render(new HtmxRenderContext(w));
|
||||
return System.Text.Encoding.UTF8.GetString(w.WrittenSpan);
|
||||
}
|
||||
|
||||
new Card(
|
||||
content: "<p>Are you sure you want to delete this item?</p>",
|
||||
footer: Render(new Button("Cancel", variant: "outline"))
|
||||
+ Render(new Button("Delete", variant: "destructive", type: "submit")))
|
||||
```
|
||||
|
||||
### HTMX trigger
|
||||
### HTMX load more button
|
||||
|
||||
```csharp
|
||||
new Button(
|
||||
"Load more",
|
||||
hxAttrs: """hx-get="/items?page=2" hx-target="#item-list" hx-swap="beforeend"""")
|
||||
variant: "outline",
|
||||
hxAttrs: """hx-get="/items?page=2" hx-target="#item-list" hx-swap="beforeend"""")
|
||||
```
|
||||
|
||||
### Submit button inside a form
|
||||
|
||||
```csharp
|
||||
new Button("Sign in", variant: "default", type: "submit", size: "default")
|
||||
```
|
||||
|
||||
### Ghost button with inline SVG icon
|
||||
### Icon-only ghost button (e.g. a refresh icon in a toolbar)
|
||||
|
||||
```csharp
|
||||
new Button(
|
||||
label: """
|
||||
<svg class="h-4 w-4" .../>
|
||||
<span>Refresh</span>
|
||||
""",
|
||||
variant: "ghost")
|
||||
label: "<svg class='h-4 w-4' ...fill or stroke SVG here/>",
|
||||
variant: "ghost",
|
||||
size: "icon")
|
||||
```
|
||||
|
||||
### Disabled appearance (via HTML)
|
||||
### Disabled state
|
||||
|
||||
The Button component does not have a `disabled` constructor parameter. Set it via `hxAttrs` if needed:
|
||||
Button does not have a `disabled` parameter. Pass it through `hxAttrs`:
|
||||
|
||||
```csharp
|
||||
new Button("Processing...", variant: "default", hxAttrs: "disabled aria-disabled='true'")
|
||||
new Button("Processing...", hxAttrs: "disabled aria-disabled='true'")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Button is a `<button>` element — straightforward HTML with Tailwind classes. The `hxAttrs` string is appended verbatim inside the opening `<button>` tag, so any valid HTML attribute works there. The `label` is inserted as raw HTML, which is how inline SVG icons are supported.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user