Button
A primary action — link or button — in four variants, two sizes, with an optional icon.
| Prop | Type | Default | Notes |
|---|---|---|---|
label |
String | nil |
Button text. Also accepts a content block. |
href |
String | nil |
When present, renders an <a>; otherwise a <button>. |
variant |
String | "primary" |
One of VARIANTS: primary, secondary, muted, ghost. |
size |
String | "medium" |
One of SIZES: medium (32px), large (40px). |
border |
String | "square" |
One of BORDERS: square (8px radius), rounded (pill). |
icon |
String | nil |
Icon name, rendered via IconComponent. With a label it sits leading; with no label the button is icon-only. |
disabled |
Boolean | false |
Disables the element (button attr / aria-disabled on links). |
type |
String | "button" |
Button type attribute: "button", "submit", or "reset". |
**html_options |
Hash | — | Any extra HTML attributes (data-*, aria-*, …). |
Disabled
1 | <%= render ButtonComponent.new(label: "Disabled", href: "#", variant: "muted", disabled: true) %> |
Ghost
1 | <%= render ButtonComponent.new(label: "Ghost", href: "#", variant: "ghost") %> |
Icon only
1 | <%= render ButtonComponent.new(href: "#", icon: "settings-gear-1", aria: { label: "Settings" }) %> |
Large
1 | <%= render ButtonComponent.new(label: "Large", href: "#", size: "large") %> |
Muted
1 | <%= render ButtonComponent.new(label: "Muted", href: "#", variant: "muted") %> |
Primary
1 | <%= render ButtonComponent.new(label: "Primary", href: "#") %> |
Rounded
1 | <%= render ButtonComponent.new(label: "Rounded", href: "#", border: "rounded") %> |
Secondary
1 | <%= render ButtonComponent.new(label: "Secondary", href: "#", variant: "secondary") %> |
Submit
1 | <%= render ButtonComponent.new(label: "Submit", type: "submit") %> |
With icon
1 | <%= render ButtonComponent.new(label: "Next", href: "#", icon: "arrow-right") %> |