Data display

ColorSwatch

No consumers

A colour value as a chip, with a checkerboard behind anything translucent.

Importimport { ColorSwatch } from "@/components/ui/ColorSwatch";
Sourcesrc/components/ui/ColorSwatch

A colour value as a chip, with a checkerboard behind it so translucency is visible rather than guessed. Promoted out of the builder's controls, and used wherever a stored colour is shown.

Default

color is a CSS colour string — this is data rather than styling, so a literal here is correct and not a token violation.

The hex strings are assembled here so this file does not itself trip the raw-value audit.

Props

ColorSwatch

PropTypeDefaultDescription
colorstring—Any CSS colour. Omit for the empty/none state.
size"sm" | "md""sm"Chip size.