Import Swatch, SwatchPattern, and SwatchShape from @prepared911/ui/swatch. Re-exported types: SwatchProps, SwatchMeaningfulProps, SwatchDecorativeProps, and VectorPaint / VectorPaintToken from the swatch entry (vector paint types live in packages/ui/src/parts/vector-paint/types.ts).
There is no className, style, or as. Fixed 12×12 box; no size prop. Consumers may pass data-* attributes the same way as on Image and Shape.
Props
Name
Type
Default
Description
label
LocalizedMessage
—
Accessible name; renders role="img" and aria-label.
pattern
SwatchPattern
—
Which pattern to draw.
shape
SwatchShape
—
Filled or stroked circle.
Filled or stroked square.
Horizontal line mark.
Pattern family.
decorative
boolean
—
When omitted or false, the swatch is meaningful and must supply label.
Marks the swatch as decorative. Renders aria-hidden="true" and focusable="false".
fill
VectorPaint
—
Fill paint. Circle and Square use fill; Line and Pattern prefer stroke, then fill.
stroke
VectorPaint
—
Stroke paint. Circle and Square outline when set; Line and Pattern use stroke, then fill.
Discriminated shape and pattern
SwatchProps is a union over shape:
shape: SwatchShape.Circle | Square | Line: do not pass pattern.
shape: SwatchShape.Pattern: pattern: SwatchPattern is required. TypeScript rejects pattern on other shapes.
Meaningful vs decorative is a separate union: either label (and optional decorative?: false) or decorative: true without label.
SwatchShape
Member
Serialized value
Description
Circle
circle
Filled or stroked circle (legend dot).
Square
square
Filled or stroked square.
Line
line
Horizontal line segment (series line).
Pattern
pattern
Non-solid marks; requires pattern.
SwatchPattern
Member
Serialized value
Description
Dashed
dashed
Dashed ring matching chart comparison series swatches.
Dotted
dotted
Dotted ring.
Hatched
hatched
Diagonal hatch fill.
Vertices
vertices
Outlined polygon with square corner markers (GIS layer style).
VectorPaint (fill, stroke)
Foreground token (except Inherit) | ChartColor | DataColor. On Circle and Square, fill fills the solid and stroke outlines when set. On Line and Pattern, paint resolves to stroke, then fill for the mark geometry.
Figma
The Swatch component set in the Axon 911 Design System file maps to this component through packages/ui/src/components/swatch/swatch.figma.ts. The set exposes Shape, Pattern and Outlined as variants: Outlined is the stroke form of Circle and Square, while Line and Pattern marks always draw a stroke. Paint comes from the mark's Text Foreground variable mode; ChartColor and DataColor paint and the accessible name are code-only. See Figma Code Connect.
Storybook
The registry links the root `Default` story. Open `Swatch/Props` for every shape and pattern, legend row composition, GIS `DataColor` fixtures, and meaningful vs decorative examples.