Design System

Buttons trigger an action such as submitting a form or showing/hiding an interface component. Use the appropriate variant to communicate hierarchy and importance.

Variants

Interactive Playground

Props

Code Snippet

// Primary — main CTA
<Button variant="primary" label="Save changes" onClick={handleSave} />

// Loading state
<Button variant="primary" label="Saving…" loading />

// With leading icon
<Button variant="primary" label="Add item"
       leadingIcon={<PlusIcon size={24} />} />

Usage

Input fields let users enter and edit single-line text. A floating label appears inside the field whenever it is focused or has a value.

Design Tokens

Interactive Playground

Props

Code Snippet

// Basic — label + placeholder + hint
<InputField
  label="Email address"
  placeholder="you@example.com"
  hintText="We'll never share your email."
  value={value} onChange={setValue}
/>

// Error state
<InputField
  label="Password"
  type="password"
  errorMessage="Must be at least 8 characters."
/>

Usage Rules

Chips are compact, non-interactive labels used to surface metadata, categories, or attributes alongside content. Use them to communicate what something is — a skill, a tag, a category — not to trigger an action.

Design Tokens

Interactive Playground

Props

Code Snippet

// Default (S)
<Chip label="AI" />

// Large — hero section
<Chip label="Product Designer" size="L" />

// Inline group
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
  <Chip label="UX" />
  <Chip label="UI Design" />
</div>

Usage Rules

Container is a composable box primitive used as the foundation for cards, callouts, and content sections. It exposes two visual variants and a single size axis — padding — so surfaces compose consistently across the app. Corners are always square.

Variants

Two surface treatments. Use bordered for outlined callouts with no fill, and filled for quiet in-flow blocks.

Sizes

Padding · s · m · l

Interactive Playground

Props

Code Snippet

// Bordered callout (default)
<Container>
  content
</Container>

// Filled in-flow block, large padding
<Container variant="filled" padding="l" >
  content
</Container>

Usage Rules