ColorSwatch
@stellaria/nebula-webColorSwatchPropsPreview
Props
8| Prop | Type | Default |
|---|---|---|
children What sits on top of the colour — usually a check mark for the selected one. | ReactNode | — |
className | string | — |
color requiredWhat the swatch paints. Anything starting with `#` or containing a function call is used verbatim, which is what lets it show a raw value a user picked; anything else is resolved through the theme scales at their 600 step. | ColorExtended | (string & {}) | — |
label Names the colour for assistive tech. Without it a static swatch is `aria-hidden`, which is right beside a written colour name and wrong when the swatch stands alone. A pressable swatch always has a name: this, or the raw `color` as a last resort. | string | — |
onPress Turns the swatch into a real button. It is what makes it selectable, and it also changes the element: without it the swatch is a `span` and takes no focus. | (() => void) | — |
radius How round it is. | "sm" | "md" | "full" | "full" |
size The swatch's square, as a raw pixel length rather than a step. | number | 24 |
withShadow Keeps the inset shadow that stops a pale swatch from disappearing into a pale surface. It is the only thing giving a near-white swatch an edge, so turning it off needs a border of your own. | boolean | true |
Also accepts
On top of its own props, this component forwards these groups.