Button Component
All button variants, colors, sizes, shapes, and widths.
Notes
- Prefer combined utilities like
btn-outline-primary over separate
btn-outline btn-primary — smaller CSS output.
<button> and <input type="submit/reset/button"> get basic
btn styles by
default from preset.css. Add classes only for variants.
Button elements
Button tag
Base variants + color
Separate: btn-solid + btn-primary
Combined: btn-solid-primary (recommended)
Link CJK
btn-link (default underline offset)
btn-link-cjk (optimized offset for CJK)
Primary colors
Primary
Secondary
Tertiary
Status colors
Success
Error
Info
Warning
Caution
Highlight
Neutral colors
Ink
Title
Description
Caption
Placeholder
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Solid
Outline
Muted
Subtle
Vivid
Ghost
Sizes (btn-4 ~ btn-15)
16px (btn-4)
20px (btn-5)
24px (btn-6)
28px (btn-7)
32px (btn-8, default)
36px (btn-9)
40px (btn-10)
44px (btn-11)
48px (btn-12)
52px (btn-13)
56px (btn-14)
60px (btn-15)
Width variants
btn-full (100%)
btn-ratio (1:1)
btn-ratio-2 (2:1)
btn-gutter (1em padding x)
btn-gutter-2 (2em padding x)
Scale width
btn-scale (fixed width)
btn-scale-2 (2x width)
btn-scale-[3] (custom 3x width)
Scale with outline variant
Shapes
btn-pill (pill)
btn-rounded (default 8px)
btn-fluid (dynamic radius)
btn-square (no radius)