Swatch Component
Color swatch that mimics <input type="color"> appearance with inner color preview. Supports variants, shapes, sizes, and dynamic colors.
Notes
- Base:
.swatch. Use with <span> or <input type="color">.
- Variants:
swatch-outline (thick border), swatch-plain (no border, filled), swatch-muted (subtle border, default).
- Shapes:
swatch-circle / swatch-pill, swatch-rounded, swatch-square, swatch-fluid.
- Sizes:
swatch-4 ~ swatch-15. Compound shortcuts: swatch-muted-*, swatch-outline-*, swatch-plain-*.
Basic usage
Variants
Default (muted style)
swatch-outline
swatch-plain
Compound shortcuts
swatch-muted-*
swatch-outline-*
swatch-plain-*
Shapes (swatch-circle === swatch-pill)
R
C
S
F
Shapes + outline
R
C
S
F
Shapes + plain
Sizes
swatch-4 ~ swatch-15
4
5
6
7
8
9
10
11
12
13
14
15
Size + plain (circle)
Size + outline (circle)
Theme colors
Primary / Secondary / Tertiary
Success / Error / Info
Highlight / Warning / Caution
Ink / Title / Description / Caption / Disabled
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]
Tailwind colors
Tailwind + plain square
Use cases
Color picker palette
Outline palette
Selected state with check icon
Label swatches
P
S
E
I
P
S
E