Swatch

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.
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 value lines are set in mono, and the lockup comes in two more sizes (small, large), as a circle, inline (the label beside the block), or as a block (a full-width ramp bar).
iOS
Android
Web
tsx
<Swatch color={tokens.primary} value="--primary">
primary
</Swatch>

Props

Prop
Description
color
required
string
The fill: any React Native color string. Pass a theme token, not a literal.
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).
small
boolean
Size (pick one; default 56). Sets the block's edge, or its height when `block`.
large
boolean
Size (pick one; default 56). Sets the block's edge, or its height when `block`.
circle
boolean
Circle instead of the default rounded square. Keeps the 1:1 footprint, so it wins over `block`'s stretch.
inline
boolean
Put the label column beside the block instead of under it.
block
boolean
Stretch the block to the parent's width; the size then reads as its height (the full-width ramp bar).
accessibilityLabel
string
Accessible name override. By default the sample names itself from its own name, value, and detail (falling back to the color string), so pass this only when the name is a node rather than text and there is nothing to read.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For layout composition only (not styling): the fill, radius, and size come from props.

Do & Don’t

Anatomy

Don’t
primary
--primary
Set a bare block beside a hand-composed text column: the spacing and the type scale drift row to row, and the sample ships as an unnamed block.
Do
Let Swatch carry the name and the value, so every row of a sheet keeps one lockup and one accessible name.

Color source

Don’t
Hard-code the value a token resolves to; the sample keeps showing the light color after the scheme flips to dark.
Do
Pass the live token, so the sample repaints when the scheme flips.
← Stepper
Switch →