ColorSample is a non-interactive color swatch. Use it next to a label so the meaning does not depend on color alone. Selection belongs to the surrounding control.
Usage
colorName selects a theme palette entry for the fill and border. variant accepts default, circle, or pipeline. Omitting it uses the default shape.
Custom colors
color overrides the fill; colorName remains required and still determines the border color. className styles the swatch. Other native attributes and click handlers are not forwarded. To offer selectable colors, compose the swatch inside a labeled ListItem.
Props
string
CSS class applied to the swatch.
string
CSS color that overrides the background; the border still uses
colorName."amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"
required
Theme color used for the background and border. Required even when
color overrides the background."circle" | "default" | "pipeline"
Swatch shape:
default, circle, or pipeline. Omitting it uses the default shape.