Designed for AI products. Built for AI to use.
Tier 1 — gradient background, white text, strongest CTA. Use sparingly: one per surface.
| variant ↓ / state → | default | hover | active | disabled |
|---|---|---|---|---|
| default |
hover / active force-state mirror the .gradient-btn box-shadow lift; live :hover still owns the precise pixel definition.
Secondary action button for prompt or workflow decisions.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/secondary-button.json
Tier 2 — solid inverted surface (black in light mode, white in dark).
| variant ↓ / state → | default | hover | active | disabled |
|---|---|---|---|---|
| default |
DS-162 — Apple's own Continue with Apple button: black in light mode, white in dark, Apple's logo, title 43% of height. Use only for Sign in with Apple; never restyle it.
Outlined action button for quieter conversation and workflow actions.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/tertiary-button.json
Tier 3 — bordered, default text color. Lightest-weight option.
| variant ↓ / state → | default | hover | active | disabled |
|---|---|---|---|---|
| default |
Pill-shaped secondary action with optional icon and disabled state.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/ghost-pill-button.json
Pill-shaped bordered secondary — used in page headers next to FilterChip rows. size='sm' gives a tighter ~32px pill (pair with a 12px glyph) for inline Edit / Reveal-in-Finder actions; default 'md' is unchanged.
Named icon action for conversation headers; size the mobile hit area to at least 44 pixels.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/header-icon-button.json
Named icon button for page headers: 44×44 on mobile, 40×40 on desktop (sidebar toggle, panel close, modal close).
Square / round icon-only button, 24–44px — the mid/small inline buttons between ToolbarIconButton (composer) and HeaderIconButton (44px mobile / 40px desktop). Four tones: default (transparent→hover), filled (MiniSidebar keys), overlay (white glyph on a dark bg-scrim, for buttons on photos/video), inverted (dark glyph on a light bg-scrim-inverted). Consumer sizes the glyph ≈ box×0.5; className is the escape hatch for responsive sizing + one-off active rings.
Composer-scale icon button (uses --toolbar-btn-h token), pairs with ToolbarPill / ToolbarSegmented in the same row.
Inline 'add a new row' affordance — sits at the end of an editable list (file list, tag list).
Workflow or conversation selection row with optional secondary text and current state.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/menu-row.json
Full-width icon + label row for navigating / selecting an EXISTING item (file rows, dropdown menu items). Leading 16px icon, truncating type-h2 label, optional trailing (chevron / check), active state. Optional `sublabel` adds a wrapping second line (a status / reason note) and `muted` greys the label for a row that is listed but did not take effect. Contrast with AddRowButton ('add a new row').
Quiet text action with disabled and disclosure attributes.
Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.
Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.
Required stylesheet: frame.cssnpx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/text-button.json
Bare text-link button — no border / fill, secondary text → primary on hover. The lightest action (Not now, clear, Replace…). tone='primary' for a stronger primary-text link.
Bordered external-resource card with a 44px minimum target, title/icon row, and supporting caption. Use for grids of documentation and reference destinations.