Color Swatch

Used to preview a color

import { ColorSwatch } from "chakra-ui-solid";

export default function ColorSwatchBasic() {
  return <ColorSwatch value="#bada55" />;
}

Usage

import { ColorSwatch } from "chakra-ui-solid";

<ColorSwatch value="#bada55" />

value is required. The colour and the checkerboard behind it share one background shorthand, 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.

import { ColorSwatch, HStack } from "chakra-ui-solid";
import { For } from "solid-js";

export default function ColorSwatchWithSizes() {
  return (
    <HStack>
      <For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"] as const}>
        {(size) => <ColorSwatch value="#bada55" size={size} />}
      </For>
    </HStack>
  );
}

Alpha

Here’s an example of how to create a color swatch with an alpha channel.

import { ColorSwatch, HStack } from "chakra-ui-solid";
import { For } from "solid-js";

/**
 * **The one page on this site where looping over runtime values is safe**, and it is worth saying
 * why, because the rule everywhere else is the opposite. `checkmark-with-colors.tsx` writes its ten
 * palettes out by hand: `colorPalette` becomes a *class*, so a value Panda cannot see in the source
 * has no rule and the mark paints in the default colour with nothing to say so. A swatch's `value`
 * never becomes a class at all — it is written into the element's inline `style` as `--color`, and
 * an inline style is not CSS a build has to generate. So these four can come from an array, and so
 * could four thousand read from a server.
 */
export default function ColorSwatchWithAlpha() {
  return (
    <HStack>
      <For each={colors}>{(color) => <ColorSwatch value={color} size="xl" />}</For>
    </HStack>
  );
}

const colors = [
  "rgba(255, 0, 0, 0.5)",
  "rgba(0, 0, 255, 0.7)",
  "rgba(0, 255, 0, 0.4)",
  "rgba(255, 192, 203, 0.6)",
];

With Badge

Here’s an example of how to compose the ColorSwatch with a Badge.

#bada55

import { Badge, ColorSwatch } from "chakra-ui-solid";

export default function ColorSwatchWithBadge() {
  return (
    <Badge>
      <ColorSwatch value="#bada55" boxSize="0.82em" />
      #bada55
    </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.

import { ColorSwatchMix, HStack } from "chakra-ui-solid";

export default function ColorSwatchMixed() {
  return (
    <HStack>
      <ColorSwatchMix size="lg" items={["red", "pink"]} />
      <ColorSwatchMix size="lg" items={["red", "pink", "green"]} />
      <ColorSwatchMix size="lg" items={["lightgreen", "green", "darkgreen", "black"]} />
    </HStack>
  );
}

Palette

Here’s an example of composing multiple swatches to create a palette.

import { ColorSwatch, Group } from "chakra-ui-solid";
import { For } from "solid-js";

export default function ColorSwatchPalette() {
  return (
    <Group attached width="full" maxW="sm" grow>
      <For each={swatches}>{(color) => <ColorSwatch value={color} size="2xl" />}</For>
    </Group>
  );
}

const swatches = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"];

Props

ColorSwatchProps
Prop	Default	Type
`shape`	`'rounded'`	`ConditionalValue<'square' \| 'circle' \| 'rounded'>` 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'>` 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`*	—	`string` The 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 everything it inherits — 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.

ColorSwatchMixProps
Prop	Default	Type
`items`*	—	`string[]` The colours to show, at most four. A fifth throws.

Plus everything it inherits — Omit<ColorSwatchProps, "value">, 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.