Skip to content

Button

Triggers an action. Renders a <button> by default, or an <a> when you pass href.

Variants

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="soft">Soft</Button>
<Button variant="outline">Outline</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

As a link

HomeDisabled link
<Button href="/">Home</Button>
<Button href="/" variant="secondary" disabled>Disabled link</Button>

Disabled

<Button disabled>Disabled</Button>

Props

PropTypeDefaultDescription
variantprimary | secondary | ghost | danger | soft | outlineprimaryVisual style.
sizesm | md | lgmdPadding and font size.
hrefstring-Renders an anchor with button styling.
typebutton | submit | resetbuttonNative type, button element only.
disabledbooleanfalseBlocks interaction.

Theming

:root {
  --ink-button-radius: 999px;      /* pill buttons */
  --ink-button-pad-x: 1.25rem;     /* wider buttons */
  --ink-button-primary-hover: #9a3412;
  --ink-button-ghost-text: #7c2d12; /* ghost/soft/outline text, AA on surface */
}

Accessibility