Basic

Sizes

sm (24px) · default (32px) · lg (48px)

Different CSS Color Formats

With Transparency (Alpha)

A checkerboard pattern shows through any color with an alpha channel below 1.

Without Transparency

withoutTransparency disables the checkerboard, blending alpha colors with the surface behind.

No Color / Invalid

When the color prop is missing or invalid, the swatch shows a diagonal strike-through line.

Disabled

Color Palette

Interactive (clickable)

Wrap the swatch in a <button> for click/focus interaction.

Design Tokens