Button

Variants, grouped usage, states, and token-driven rendering.

Open Button Playground • Open Button in Figma

Variants

Grouped Actions (Button Group Wrapper)

Open Button Group Playground

Use ButtonGroup to keep related actions visually and semantically grouped.

<div
  class="button-group"
  role="group"
  aria-label="Travel dates"
  data-orientation="horizontal"
  data-attached="false"
  data-justify="start"
>
  <button class="button outline" type="button">Day 1</button>
  <button class="button outline" type="button">Day 2</button>
  <button class="button outline" type="button">Day 3</button>
</div>

• orientation: "horizontal" (default) or "vertical"
• attached: false (default) removes shared borders/gaps when true
• justify: "start" (default) or "stretch"

Usage

<button class="button" type="button">Solid</button>
<button class="button outline" type="button">Outline</button>
<button class="button ghost" type="button">Ghost</button>
<button class="button" type="button" disabled>Disabled</button>

{% import "macros/ui.njk" as ui %}

{{ ui.button("Solid") }}
{{ ui.button("Outline", "outline") }}
{{ ui.button("Ghost", "ghost") }}
{{ ui.button("Disabled", "", true) }}

import { Button } from "ui-foundations/react/button";

<Button>Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button startIcon="search">Search</Button>
<Button disabled>Disabled</Button>

Used tokens