# Buttons > Frame button components with live states: PrimaryButton, SecondaryButton, TertiaryButton, GhostPillButton, IconButton, MenuRow, TextButton and more. Web page: https://system.beibeidesign.com/components/buttons/ ### PrimaryButton Master Used in: Wingman 29 · WorkPal 15 Tier 1 — gradient background, white text, strongest CTA. Use sparingly: one per surface. Save changes Disabled Variant × state matrix (1×4 = 4 cells) | variant ↓ / state → | default | hover | active | disabled | | --- | --- | --- | --- | --- | | default | CTA | CTA | CTA | CTA | hover / active force-state mirror the .gradient-btn box-shadow lift; live :hover still owns the precise pixel definition. ### SecondaryButton Master Used in: Wingman 6 · WorkPal 4 Secondary action button for prompt or workflow decisions. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/secondary-button.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/secondary-button.json ``` Copy install command Close Tier 2 — solid inverted surface (black in light mode, white in dark). Cancel Disabled Variant × state matrix (1×4 = 4 cells) | variant ↓ / state → | default | hover | active | disabled | | --- | --- | --- | --- | --- | | default | Secondary | Secondary | Secondary | Secondary | ### AppleSignInButton Master Used in: Wingman 0 · WorkPal 1 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. Continue with Apple ### TertiaryButton Master Used in: Wingman 26 · WorkPal 15 Outlined action button for quieter conversation and workflow actions. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/tertiary-button.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/tertiary-button.json ``` Copy install command Close Tier 3 — bordered, default text color. Lightest-weight option. Learn more Disabled Variant × state matrix (1×4 = 4 cells) | variant ↓ / state → | default | hover | active | disabled | | --- | --- | --- | --- | --- | | default | Tertiary | Tertiary | Tertiary | Tertiary | ### GhostPillButton Master Used in: Wingman 6 · WorkPal 13 Pill-shaped secondary action with optional icon and disabled state. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/ghost-pill-button.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/ghost-pill-button.json ``` Copy install command Close 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. Add memory No icon Reveal ### HeaderIconButton Master Used in: Wingman 4 · WorkPal 11 Named icon action for conversation headers; size the mobile hit area to at least 44 pixels. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/header-icon-button.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/header-icon-button.json ``` Copy install command Close Named icon button for page headers: 44×44 on mobile, 40×40 on desktop (sidebar toggle, panel close, modal close). New session Notifications Settings ### IconButton Master Used in: Wingman 12 · WorkPal 9 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. tone="default" · sizes 24 / 28 / 32 / 40 / 44 (square) size 24 size 28 size 32 size 40 size 44 shape="round" · active · filled · disabled · secondary glyph round active filled menu disabled secondary glyph tone="overlay" / "inverted" — shown on a sample media surface Previous Download Mute Next ### ToolbarIconButton Master Used in: Wingman 0 · WorkPal 1 Composer-scale icon button (uses --toolbar-btn-h token), pairs with ToolbarPill / ToolbarSegmented in the same row. Attach Attach file Voice Voice input ### AddRowButton Master Used in: Wingman 1 · WorkPal 2 Inline 'add a new row' affordance — sits at the end of an editable list (file list, tag list). existing-file.md Add file ### MenuRow Master Used in: Wingman 0 · WorkPal 8 Workflow or conversation selection row with optional secondary text and current state. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/menu-row.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/menu-row.json ``` Copy install command Close 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'). Inbox A very long document name that should truncate Settings budget.xlsx Not used this turn · format unsupported ### TextButton Master Used in: Wingman 1 · WorkPal 12 Quiet text action with disabled and disclosure attributes. Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/text-button.tsx) 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.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css) ``` npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/text-button.json ``` Copy install command Close 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. Not now, explore first Replace custom Disabled ### ResourceLinkCard Master Used in: no app imports yet Bordered external-resource card with a 44px minimum target, title/icon row, and supporting caption. Use for grids of documentation and reference destinations. [Frame Design System Browse the public component catalog and implementation guidance.](https://system.beibeidesign.com/)