Button

ready

Text/icon action button with ghost, primary, tab, and outline variants.

The Button is the single action control behind the header actions, the main-header tabs, the table toolbar, and the “View Prototype” call to action. One component, a few variants.

Anatomy

  1. 1 Leading icon — optional glyph from the Icon set
  2. 2 Label — the action text
  3. 3 Dropdown chevron — optional trailing chevron for menu triggers

Variants

Ghost (default)

Low-emphasis action used in headers and toolbars.

<Button icon="download" label="Download" />

Primary

High-emphasis call to action.

<Button variant="primary" size="md" label="View Prototype" />

Tab

Used for the segmented tabs in the main header.

<Button variant="tab" label="Record" active />
<Button variant="tab" label="Letter Template" />

Outline

Secondary emphasis next to a primary action — Cancel beside Save & Continue, Back beside Pay.

<Button variant="outline" size="md" label="Cancel" />
<Button icon="columns" label="Add Column" dropdown />

States

Default

Resting ghost button.

Primary

Filled call to action.

Active tab

Selected tab variant.

Disabled

Non-interactive.

Usage

✓ Do

Use one primary button per view for the main action.

✕ Don't

Don't stack multiple primary buttons — demote the rest to ghost.

Accessibility

  • Renders a real <button> (or <a> when href is set), so it’s keyboard focusable and operable by default.
  • Provide a clear text label; an icon alone is not a label.
  • Disabled buttons set disabled (or aria-disabled for links) and drop pointer events.

Content

  • Use a verb-first label naming the action (“Save”, “Add column”).
  • Keep labels to one or two words; sentence case.

Props

PropTypeDefaultNotes
labelstring—Button text.
iconstring—Leading icon name.
variant"ghost" | "primary" | "tab" | "outline""ghost"Visual emphasis.
size"sm" | "md""sm"md is the taller pill (CTA).
blockbooleanfalseStretch to fill the container width.
dropdownbooleanfalseAdds a trailing chevron.
activebooleanfalseActive state for the tab variant.
disabledbooleanfalseGreys out and blocks interaction.
hrefstring—Renders as a link instead of a button.
  • Icon Button — icon-only square button.
  • Icons — the glyphs available for icon.