Button

Buttons trigger actions. Use primary for main CTA, secondary for less important actions.

Variants

Base

Class	Description
`.ui-button`	Base class

Size

Class	Value
`.ui-button--sm`	sm
`.ui-button--md`	md
`.ui-button--lg`	lg

Variant

Class	Value
`.ui-button--secondary`	secondary
`.ui-button--ghost`	ghost
`.ui-button--outline`	outline
`.ui-button--danger`	danger
`.ui-button--link`	link

Icon

Class	Description
`.ui-button--icon`	icon

Radius

Class	Value
`.ui-button--radius-none`	radius-none
`.ui-button--radius-sm`	radius-sm
`.ui-button--radius-lg`	radius-lg
`.ui-button--radius-full`	radius-full

Block

Class	Description
`.ui-button--block`	block

Loading

Class	Description
`.ui-button--loading`	loading

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-button-accent`	`var(--ui-color-primary)`	Primary accent color. All shades auto-generated via color-mix.
`--ui-button-height`	`var(--ui-row-2)`	Overall height
`--ui-button-padding-x`	`var(--ui-space-2)`	Horizontal padding
`--ui-button-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-button-font-weight`	`var(--ui-font-weight-medium)`	Font weight
`--ui-button-radius`	`var(--ui-radius-md)`	Corner radius
`--ui-button-color`	`var(--ui-color-text-inverse)`	Text color
`--ui-button-height-sm`	`calc(var(--ui-row) * 1.5)`	Overall height at small size
`--ui-button-font-size-sm`	`var(--ui-font-size-xs)`	Font size at small size
`--ui-button-height-md`	`var(--ui-row-2)`	Overall height at medium size
`--ui-button-font-size-md`	`var(--ui-font-size-sm)`	Font size at medium size
`--ui-button-height-lg`	`calc(var(--ui-row) * 2.5)`	Overall height at large size
`--ui-button-padding-x-lg`	`var(--ui-space-3)`	Horizontal padding at large size
`--ui-button-font-size-lg`	`var(--ui-font-size-md)`	Font size at large size

Sizes

<!-- Small for dense UIs, default for most cases, large for prominent CTAs. -->
<button class="ui-button ui-button--sm">Small</button>
<button class="ui-button ui-button--md">Medium</button>
<button class="ui-button ui-button--lg">Large</button>

Radius

<!-- Override border radius. Use radius-full for pill-shaped buttons. -->
<button class="ui-button ui-button--radius-none">None</button>
<button class="ui-button ui-button--radius-sm">Small</button>
<button class="ui-button">Default</button>
<button class="ui-button ui-button--radius-lg">Large</button>
<button class="ui-button ui-button--radius-full">Full</button>

Block

<!-- Full width button for mobile or form submit. -->
<button class="ui-button ui-button--block">Block Button</button>

Loading

<!-- Shows spinner animation. Button becomes non-interactive. -->
<button class="ui-button ui-button--loading">Loading</button>
<button class="ui-button ui-button--secondary ui-button--loading">Loading</button>

Icon Button

<!-- Square icon-only buttons. Use with SVG icons from Lucide or similar sets. -->
<button class="ui-button ui-button--icon ui-button--sm">
  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M18 6 6 18"></path>
    <path d="m6 6 12 12"></path>
  </svg>
</button>
<button class="ui-button ui-button--icon">
  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M5 12h14"></path>
    <path d="M12 5v14"></path>
  </svg>
</button>
<button class="ui-button ui-button--icon ui-button--lg">
  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
  </svg>
</button>

With Icon

<!-- Buttons with icon and text. Use ui-button__icon element with --start or --end modifier. -->
<button class="ui-button">
  <svg class="ui-icon ui-button__icon ui-button__icon--start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M5 12h14"></path>
    <path d="M12 5v14"></path>
  </svg>
Add Item
</button>
<button class="ui-button ui-button--secondary">
Next
  <svg class="ui-icon ui-button__icon ui-button__icon--end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="m9 18 6-6-6-6"></path>
  </svg>
</button>

Button Group: Default

<div class="ui-button-group" role="group">
  <button class="ui-button ui-button--outline">Left</button>
  <button class="ui-button ui-button--outline">Middle</button>
  <button class="ui-button ui-button--outline">Right</button>
</div>

Button Group: Primary Buttons

<div class="ui-button-group" role="group">
  <button class="ui-button">Save</button>
  <button class="ui-button">Save & Close</button>
</div>

Button Group: Vertical

<div class="ui-button-group ui-button-group--vertical" role="group">
  <button class="ui-button ui-button--outline">Top</button>
  <button class="ui-button ui-button--outline">Middle</button>
  <button class="ui-button ui-button--outline">Bottom</button>
</div>

Button Group: With Icons

<div class="ui-button-group" role="group" aria-label="Text formatting">
  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Bold">
    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path>
    </svg>
  </button>
  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Italic">
    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path>
    </svg>
  </button>
  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Underline">
    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path>
    </svg>
  </button>
</div>

Close Button: Default

<button class="ui-close-button" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>

Close Button: Sizes

<button class="ui-close-button ui-close-button--sm" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button ui-close-button--lg" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>

Close Button: Subtle

<!-- Lower visual prominence for secondary dismiss actions. -->
<button class="ui-close-button ui-close-button--subtle" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button ui-close-button--subtle ui-close-button--sm" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>

Close Button: States

<button class="ui-close-button" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button ui-close-button--hover" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button ui-close-button--focus" type="button" aria-label="Close">
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>
<button class="ui-close-button" type="button" aria-label="Close" disabled>
  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>