Color Swatch
Color Swatch provides a finished passive preview for one CSS color or a compact mix of colors. Its checkerboard reveals alpha without requiring application CSS.
Built from the published package
Know when Color Swatch is the right part
Use it when
Use Color Swatch beside color names and values, inside a semantic preset control, or in palettes and design-token documentation. Use Color Picker when the user must edit or select the value.
Choose another path when
Do not use Color Swatch as a color input, selection owner, contrast validator, or the only carrier of meaning. Use the appropriate semantic control and keep visible text for color names and states.
Installation and imports
For modular CSS, load the foundation once and the component stylesheet:
Quick start
Visual recipes and states
Small, medium, and large sizes are 1rem, 1.5rem, and 2rem. The checkerboard stays visible beneath alpha colors. Mix divides one swatch evenly into conic segments. Color Swatch owns no interactive states.
Examples
API
Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.
| Part | Prop | Values | Default |
|---|---|---|---|
Root | value | Any valid CSS color | required |
Mix | values | Two or more valid CSS colors | required |
| both | size | sm, md, lg | md |
| both | label | localized string | - |
size | ColorSwatchSize | sm, md, lg | md |
Public exports are ColorSwatch, ColorSwatchRoot, ColorSwatchMix, ColorSwatchRootProps, ColorSwatchMixProps, and ColorSwatchSize.
Accessibility
Without label, a swatch is aria-hidden because adjacent text or its owning control must carry meaning. With label, it becomes role="img" with that accessible name. Color alone must never communicate selection, validation, or action.
Responsive behavior
The swatch is content-sized, uses logical dimensions, and does not change across breakpoints. The owning Stack, Grid, control, palette, or Block owns responsive arrangement.
Styling and tokens
Customization
Prefer size before overriding the size variable. Set semantic color strings through value or values; do not replace the checkerboard or use custom CSS merely to create a standard swatch.
Tokens and CSS hooks
Stable hooks are .brick-color-swatch, .brick-color-swatch--mix, data-slot, and data-size. Public variables are --brick-color-swatch-size, --brick-color-swatch-value, --brick-color-swatch-border-color, and --brick-color-swatch-radius.
Advanced reference
Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.