Developer guide

Copy-paste reference for Breezy 2.0 buttons. Full write-up lives in app/components/web2.0/README.md.

Import

import { Button } from "@/app/components/web2.0"

// variant: primary | secondary | tertiary | destructive | affirmative
<Button variant="secondary">Cancel</Button>

// size: small | regular | large
<Button size="large">Continue</Button>

// disabled
<Button disabled>Unavailable</Button>

// loading — spinner, not clickable, keeps variant color
<Button loading>Saving</Button>

// fullWidth
<Button fullWidth>Continue</Button>

// type — default "button"; use "submit" in a form
<Button type="submit">Submit</Button>

// any native button attr
<Button onClick={onSave} aria-label="Save">Save</Button>

Native <button> attributes work (`onClick`, `name`, `form`, `aria-*`). type defaults to "button", not "submit".

Props

When to use each variant

secondary vs tertiary. In light mode they look the same. Figma’s button_secondary_bg is a duplicate of primary, so secondary fill uses drop_2_bg (same as current 2.0 pills). That value equals tertiary in light. Dark mode still separates them. Do not choose between them by eye until design ships a real secondary fill.

Loading vs disabled

Loading sets the native disabled attribute (and aria-busy) so the button cannot be clicked, but it keeps the variant fill and draws a spinner. Product UI should not pass both disabled and loading; loading is enough.

Do / don’t

• Do import from @/app/components/web2.0 for new 2.0 screens.
• Don’t restyle fill, radius, or type size on top of the shared Button.
• Don’t use Buttons/Primary, PillButtons, or a local styled("button") for new 2.0 work.