Skip to content
DOL Studio

KidButton

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

Live preview

3 variants × red

3 variants — solid / outline / ghost. Solid = primary CTA, outline = secondary, ghost = tertiary text-link.
solid
outline
ghost

6 KID colors — solid

6 KID palette colors — blue / red / green / amber / purple / neutral. Canonical `KidButtonColor` enum from `@dol/ui/kid/KidButton.tsx`.
blue
red
green
amber
purple
neutral

3 sizes + pill shape

3 size scale — sm (40px) / md (48px) / lg (56px). Plus `shape="pill"` override for fully-rounded variant.
sm · 40px
md · 48px
lg · 56px
shape: pill

Import & files

Import
import { KidButton } from "@/components/Domains/DolKid/ui/KidButton";
Source file
components/Domains/DolKid/ui/KidButton.tsx

Spec

Spec Size · Usage

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

Only for KID domain. General domain = Button.

Examples

Examples 1
  • Requires Playground context

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. 

# KidButton
Slug: `button`
Domain: kid · 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 { KidButton } from "@/components/Domains/DolKid/ui/KidButton";
```
Source: `components/Domains/DolKid/ui/KidButton.tsx`


## Usage
Only for KID domain. General domain = Button.


## Examples
- **Requires Playground context**


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

Related

  • Button

    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).