Primitives

Button

The primary interactive element. Five variants cover every emphasis level — use accent for the one CTA per view, primary for high-emphasis actions, secondary as the default, ghost for toolbar/icon buttons, and danger for destructive actions. Add a glyph for visual reinforcement and kbd to surface keyboard shortcuts.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Primary interactive element.

<Button
  variant="primary"   // 'primary' | 'secondary' (default) | 'accent' | 'ghost' | 'danger'
  size="md"           // 'sm' | 'md' (default) | 'lg'
  glyph="book"        // GlyphName — optional icon
  glyphPosition="start" // 'start' (default) | 'end'
  kbd="⌘S"           // string — keyboard shortcut hint (display only)
  onClick={…}
>
  Save
</Button>

// secondary is the outline button: its border takes the accent under the chrome and surface dials
// href renders an <a> styled as a button — use for navigation
<Button variant="accent" size="lg" href="/signup">Start a list</Button>

// Style another element (e.g. a router Link) as a button
<Link to="/lists" className={buttonClassName({ variant: 'accent', size: 'md' })}>My lists</Link>