Button

Examples

Overview

Button is the primary control for triggering actions. It supports multiple variants for different emphasis levels, three sizes, icons, loading, icon-only, and rounded (pill) shapes. Primary and destructive use a matching border plus a top inset highlight so solid fills read as raised rather than flat.

import { Button } from "@standard-ui/react"

<Button variant="primary" size="md">
  Click me
</Button>

Usage

Variants

Variants encode emphasis, not taste — pick by the action's role on the surface. The ladder, highest to lowest: primary → secondary / outline → ghost. destructive sits outside the ladder: it encodes danger, not importance.

Always write variant explicitly. The default is primary, so a button without a variant silently becomes a primary CTA.

<Button variant="primary">Save changes</Button>
<Button variant="outline">Cancel</Button>
<Button variant="secondary">Edit</Button>
<Button variant="ghost">More options</Button>
<Button variant="destructive">Delete</Button>

Sizes

<Button size="sm">Tag</Button>
<Button size="md">Submit</Button>
<Button size="lg">Get started</Button>

With icons

Prefer prefix / suffix so icons scale with the control. You can still pass icons as children. Mark decorative icons with aria-hidden.

import { Button, IconPlus } from "@standard-ui/react"

<Button variant="primary" prefix={<IconPlus size={16} aria-hidden />}>
  Add item
</Button>

Loading

When loading is true, a spinner replaces the prefix, the button disables, and aria-busy is set. Keep the label so width stays stable.

<Button loading={isSaving} onClick={handleSave}>
  Save changes
</Button>

Icon only

Use iconOnly for square icon buttons. Always provide an aria-label.

<Button iconOnly aria-label="Search">
  <IconMagnifyingGlass size={16} aria-hidden />
</Button>

Rounded

rounded applies a pill shape. Works with all sizes and variants, including icon-only.

<Button rounded>Subscribe</Button>
<Button rounded iconOnly aria-label="Add">
  <IconPlus size={16} aria-hidden />
</Button>
<Button rounded variant="ghost" iconOnly aria-label="Add">
  <IconPlus size={16} aria-hidden />
</Button>

Disabled

Disabled buttons use reduced opacity and cursor-not-allowed. Prefer explaining why an action is unavailable (helper text or tooltip) instead of a silent disable.

<Button disabled={!isFormValid}>Submit</Button>

API

Button accepts all standard HTML button attributes.