ColorSwatch

atoms

Color preview block — 24×24 rounded square with hex/RGB tooltip. Used in design system docs and theme editor.

ARIA Role: img

Demo

Demo for ColorSwatch (atoms)

Color preview block — 24×24 rounded square with hex/RGB tooltip. Used in design system docs and theme editor.

Props

PropTypeRequiredDefaultDescription
colorstringYes—CSS color value (hex, rgb, hsl)

TypeScript Interface

interface ColorSwatchProps {
  color: string;
  name?: string;
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

Assertions (NASA Rule 5)

  • [type]color must be valid CSS color (NASA Rule 7)(NASA Rule 7)
  • [aria]role='img' aria-label='{name}: {color}'(WCAG 1.1.1)

Usage

Import

import { Colorswatch } from '@epasslive/design-system'

Basic

<Colorswatch />

With Variants

<Colorswatch variant="primary" size="md" />