Skip to content
DOL Studio

Button

Design: Stable Code: Coded ctainteractiveprimary 40 Figma sets 1 standalone Button/General button

Live preview

Variants

5 variants — primary / secondary / ghost / minimal / danger. Pick by hierarchy semantics (primary=brand CTA, secondary=alt, ghost=tertiary, minimal=text-link, danger=destructive).
primary
secondary
ghost
minimal
danger

Sizes

9 sizes — 3xs / 2xs / xs / sm / md / lg / xl / 2xl / 3xl. Padding + font scale together; primary tone shown.
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl

With icons

Curated compositions — leading plus, trailing arrow, and dual-icon micro-CTA. Use `inline-flex gap-1.5` between icon + label inside Button.
leading +
trailing →
+ label →

Disabled state

All 5 variants with `disabled`. Opacity-50 + cursor-not-allowed + aria-disabled.
primary
secondary
ghost
minimal
danger

Import & files

Import
import { Button } from "@dol/ui/button";
Source file
packages/@dol/ui/src/button/Button.tsx

Spec

Spec Props · Axes · Size · Usage

Props

Prop Type Default Description
variant 'solid' | 'filled' | 'outline' | 'matte' | 'filled-matte' | 'outline-matte' | 'ghost' | 'soft' | 'filled-white' 'solid' —
intent 'primary' | 'secondary' | 'secondary-filled' | 'tertiary' 'primary' —
tone 'brand' | 'neutral' | 'danger' | 'success' | 'amber' | 'blue' | 'white' from intent —
backgroundUse 'primary' | 'neutral-dark' 'primary' —
transparent boolean false —
size '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'icon' 'md' —
isLoading boolean false —
leftIcon / rightIcon ReactNode - —
pill boolean false —

Variants · Tones · Sizes

Variants
solidmatteoutlineoutline-matteghostfilled-white
Tones
brandneutralbluedangersuccessamberwhite
Sizes
2xsxssmmdlgxl2xl3xl

Size spec

Size Height Pad LR Pad TB Radius Text Icon
2xs 24 6 0 12 14 16
xs 28 6 2 12 14 16
sm 32 6 4 12 14 18
md 36 8 6 14 14 20
lg 40 12 8 14 14 20
xl 48 16 12 16 16 24
2xl 56 20 16 20 16 24
3xl 64 24 20 24 16 24

Extracted from Figma Button/Size (node 34127:59295) on 2026-04-25

Usage

Use Button for text-bearing actions. Pick intent for Figma Primary / Secondary / Tertiary, variant for Filled / Outline / Filled matte / Transparent semantics, and size from the Figma Button/Size scale. Use IconButton for icon-only actions.

Examples

Examples 5
  • AI feature buttons - Figma 2xl × all 5 variants × 3 tones (Solid/Matte/Outline/Outline-Matte/Ghost)
  • Variant ladder - Solid · Matte · Outline · Outline matte · Ghost (Figma xl, brand tone)
  • Tones × variants matrix - 5 variants × 3 tones at Figma xl (h48)
  • Sizes - Full Figma scale 2xs h24 → 3xl h64 (extracted from Button/Size component)
  • Hero CTA - Figma 3xl, h64, text-base, icon 24, radius 24

Figma source

Figma source 40 sets
Page
Button
Sets
40 + 1 standalone
Primary set
Button/General button · 185 variants Open in Figma →
Showing: Button/General button
11 other sets (+ 28 more not listed)
  • .Button icon 7 variants Figma →
  • .Button icon/Secondary/Size 22 variants Figma →
  • .Button icon/Touch/Size 2 variants Figma →
  • .Button/Content/Dropdown 3 variants Figma →
  • .Button/Content/General text inline (Quỷ tha ma bắt mày đi) 5 variants Figma →
  • .Text link/Content/General text 18 variants Figma →
  • .Text link/Layout 16 variants Figma →
  • Button element/tooltip container 4 variants Figma →
  • Button group/Floating horizontal button icon 8 variants Figma →
  • Button group/Floating vertical button icon 8 variants Figma →
  • Button icon secondary/Element tooltip container 4 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Button
Slug: `button`
Domain: general · Category: actions
Design: stable · Code: coded


## Description
Primary interactive element. 40 Figma sets cover General / AI / Promax / Status / Social / Paper / NeutralInverse / Floating / Block / Round / Touch / Split. Code parity: General + Icon button.


## Import
```ts
import { Button } from "@dol/ui/button";
```
Source: `packages/@dol/ui/src/button/Button.tsx`


## Props (9)
| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'solid' | 'filled' | 'outline' | 'matte' | 'filled-matte' | 'outline-matte' | 'ghost' | 'soft' | 'filled-white'` | 'solid' |  |
| `intent` | `'primary' | 'secondary' | 'secondary-filled' | 'tertiary'` | 'primary' |  |
| `tone` | `'brand' | 'neutral' | 'danger' | 'success' | 'amber' | 'blue' | 'white'` | from intent |  |
| `backgroundUse` | `'primary' | 'neutral-dark'` | 'primary' |  |
| `transparent` | `boolean` | false |  |
| `size` | `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'icon'` | 'md' |  |
| `isLoading` | `boolean` | false |  |
| `leftIcon / rightIcon` | `ReactNode` | - |  |
| `pill` | `boolean` | false |  |


## Axes
Variants: `solid`, `matte`, `outline`, `outline-matte`, `ghost`, `filled-white`
Tones: `brand`, `neutral`, `blue`, `danger`, `success`, `amber`, `white`
Sizes: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`


## Usage
Use Button for text-bearing actions. Pick intent for Figma Primary / Secondary / Tertiary, variant for Filled / Outline / Filled matte / Transparent semantics, and size from the Figma Button/Size scale. Use IconButton for icon-only actions.


## Examples
- **AI feature buttons - Figma 2xl × all 5 variants × 3 tones (Solid/Matte/Outline/Outline-Matte/Ghost)**
- **Variant ladder - Solid · Matte · Outline · Outline matte · Ghost (Figma xl, brand tone)**
- **Tones × variants matrix - 5 variants × 3 tones at Figma xl (h48)**
- **Sizes - Full Figma scale 2xs h24 → 3xl h64 (extracted from Button/Size component)**
- **Hero CTA - Figma 3xl, h64, text-base, icon 24, radius 24**


## Figma source
Page: Button
Sets: 40
Primary: Button/General button
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=8414-95235

Related

  • KidButton

    KIDCoded

  • Switch

    Coded

  • IconButton

    Coded
  • Start your journey

    CTASection

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).