Swatch

Atom
A color sample: a filled rounded block with the token's name and value beneath it, the anatomy a design-system color sheet repeats down a page. Swatch owns the whole lockup, so a sheet never sets a bare block next to a hand-built text column and drifts row to row.
src/atoms/swatch
View in Foundations

Playground

Every control sets a real prop of SwatchProps. The JSX below updates as you go.
Props
color
string
value
string
detail
string
Size
pick one
circle
boolean
selected
boolean
inline
boolean
JSX · SwatchProps
<Swatch color="#a298ff" value="ion" detail="oklch .74 .17 285" />

Variants

6 examples from src/atoms/swatch/swatch.md, each rendered live from its own JSX.
Sizes
<Row>
<Swatch tiny color={tokens.info}>info</Swatch>
<Swatch small color={tokens.primary}>primary</Swatch>
<Swatch color={tokens.success}>success</Swatch>
<Swatch large color={tokens.destructive}>destructive</Swatch>
</Row>
Circle
<Swatch circle color={tokens.primary}>primary</Swatch>
Inline
<Swatch inline color={tokens.primary}>primary</Swatch>
Block
<Swatch block color={tokens.primary}>primary</Swatch>
Detail line
<Swatch color={tokens.primary} value="--primary" detail="oklch(0.511 0.262 276.966)">
primary
</Swatch>
Theme picker
<View role="radiogroup" aria-label="Palette">
<Row snug alignCenter>
<Swatch violet selected onPress={() => {}} />
<Swatch cyan onPress={() => {}} />
<Swatch mint onPress={() => {}} />
<Swatch rose onPress={() => {}} />
<Swatch amber onPress={() => {}} />
</Row>
</View>

Sizes

small
default
large

Anatomy

1
Chip
2
Name
3
Value
Dimmed parts appear only in some states or variants.

Props

32 props on SwatchProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
color
string
–
The fill: any React Native color string. Pass a theme token, not a literal.
Palette picker
pick one
10 props
violet
boolean
false
cyan
boolean
false
mint
boolean
false
rose
boolean
false
amber
boolean
false
selected
boolean
false
The sample is the chosen one: draws the selection ring (a 2 px gap in the page color, then a 2 px band). On a plain sample the band is the accent and the name says "selected"; on a palette picker it is the one in force and the radio is checked.
onPress
() => void
–
Palette picker: pick this palette.
children
ReactNode
–
The sample's name (the token name). Swatch owns this label column.
value
string
–
Primary mono line under the name: what the name resolves to (a hex, a custom-property name, a ramp step).
detail
string
–
Secondary mono line under the value, for a second notation of the same color (an oklch value, a legacy alias).
Size
pick one
7 props
tiny
boolean
false
The 20 px disc of a token chip (<Chip token icon={<Swatch tiny ring circle />}>).
small
boolean
false
large
boolean
false
circle
boolean
false
Circle instead of the default rounded square. Keeps the 1:1 footprint, so it wins over block's stretch.
ring
boolean
false
Draws the token chip's hairline INSIDE the sample, a 1 px inset ring in the field border, in place of the resting hairline edge; a selected sample keeps its selection ring outside it.
inline
boolean
false
Put the label column beside the block instead of under it.
block
boolean
false
Stretch the block to the parent's width; the size then reads as its height (the full-width ramp bar).
Form
pick one
14 props
tile
boolean
false
The labelled colour tile: the parent's width, 64 px tall (40 small), its name set inside the fill on one line (ellipsized where it outgrows the tile) at an 8 px inset in the 11 px mono face, at the foot (centred small). ink paints the name; the value lines are read into the accessible name only.
bar
boolean
false
A colour bar: the parent's width, 26 px tall at the swatch bar corner (a neutral role's sample).
steps
readonly string[]
–
One bar of colour steps in place of color, flush and clipped at the ramp corner at the size's height (block small is the 32 px accent ramp); segmented stands them apart.
segmented
boolean
false
steps as separate segments: a 28 px bar, 4 apart, the step corner inside and the bar corner at its ends.
fluid
boolean
false
The chip's edge is the parent's width, held 1:1 (a spectrum's discs filling their cells).
glow
boolean
false
The fill's own ambient light under the chip (0 12px 30px -8px, the fill at .6).
centered
boolean
false
The label column centred under the chip, 10 px below it.
bare
boolean
false
No resting edge: the sample sits on its fill alone (a saturated fill that needs no hairline).
compact
boolean
false
The mono lockup: the name 500 12 px and the value 400 10 px in the code face, each on one line (ellipsized where it outgrows a narrow column), 6 px apart and 6 px under the chip; a block chip is 56 px tall.
ink
string
–
The tile name's ink, a theme token like color (default the foreground).

Accessibility and keyboard

Keyboard
Enter
Activates
Space
Activates
Tab
Moves focus on
Semantics
Roles
img
radio
States
checked
ARIA on web
aria-checked
aria-hidden
aria-label
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Swatch color={tokens.primary} value="--primary">
primary
</Swatch>
Pass a live theme token as color and the sample follows the active scheme; a hairline edge keeps a white or near-black sample visible on the surface behind it. The chip is 48px at a 12px corner (32 small, 72 large, and 20 tiny, the disc of a token Chip), the name a 13px line and the value lines 11px mono in the subtle ink; the lockup also comes as a circle, inline (the label beside the block), or as a block (a full-width ramp bar). ring draws the edge as a 1px inset ring in the field border instead of the hairline, the token chip's swatch. selected marks the chosen sample with the selection ring, a 2px gap in the page color and then a 2px accent band, and adds "selected" to its accessible name. decorative hides a sample from assistive tech when text beside it already names it (a theme choice's disc before its label), so the name is read once.
A palette picker takes one of the kit's five accent palettes, violet, cyan, mint, rose or amber (ThemeProvider's precedence: cyan, mint, rose, amber, violet), with selected and onPress. It is a 16px disc of the palette's hue, the same in both schemes, and a radio named for its palette ("Violet"). The palette in force wears the selection ring, a 2px gap in the card color and then a 2px muted-foreground band; the others draw none. On the web a hovered disc grows to 1.25 times its size. A size boolean sizes the disc to that sample edge (small is a 32px disc, the size a form's hue choice takes). Put the pickers in a radiogroup so the set reads as one choice. A plain sample still uses color.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--tx3

Related components