Usage
import { ColorSwatch } from "chakra-ui-solid";<ColorSwatch value="#bada55" />
valueis required. The colour and the checkerboard behind it share onebackgroundshorthand, so a swatch with nothing to paint loses both and renders as an empty box.
Examples
Sizes
Use the size prop to change the size of the color swatch.
Alpha
Here’s an example of how to create a color swatch with an alpha channel.
With Badge
Here’s an example of how to compose the ColorSwatch with a Badge.
boxSize is a style prop, so it lands in @layer utilities and beats the --swatch-size the
size variant sets — which is what lets the swatch take its size from the badge’s text instead of
from the scale.
Mixed Colors
Use the ColorSwatchMix to create a color swatch that contains multiple colors, but retains the size
of a single color swatch.
Palette
Here’s an example of composing multiple swatches to create a palette.
Props
| Prop | Default | Type |
|---|---|---|
shape | 'rounded' | ConditionalValue<'square' | 'circle' | 'rounded' | PresetVariant<'colorSwatch', 'shape'>>The corner treatment — `rounded` is the theme's own radius, `square` has none, `circle` is a full radius. |
size | 'md' | ConditionalValue<| '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit' | 'full' | PresetVariant<'colorSwatch', 'size'>>The swatch's width and height together, as a scale step. `inherit` takes the size from an enclosing swatch, which is how {@link ColorSwatchMix} sizes its cells; `full` fills the parent. |
value* | — | stringThe colour to show, as any CSS colour — `#bada55`, `rgba(255, 0, 0, 0.5)`, `tomato`. **Required, where the React version's own usage snippet omits it.** It is painted as a gradient over the checkerboard, and both live in one `background` shorthand: with no colour the shorthand is invalid at computed-value time and reverts to its initial value, so the swatch loses the checkerboard too and renders as nothing at all. |
Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.