Marble UI
← Components

Color Swatch

Preview: Square

Accessible color preview: announces the color name ("vibrant red").

Import

import { ColorSwatch } from '@marbleui/ui'

Props

<ColorSwatch>

PropTypeDefaultDescription
shape'circle' | 'square''square'
size'sm' | 'md' | 'lg''md'

Also accepts React Aria props (81).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ColorSwatch. Follow the primitive's docs for the full keyboard map.

Usage notes

Small color preview that announces the color’s name to screen readers. It is display only: to let users choose, use ColorSwatchPicker.

<ColorSwatch color="#6366f1" />
<ColorSwatch color="rgba(15, 23, 42, 0.4)" shape="circle" size="lg" />
  • color takes a string or a Color object. Translucent colors render over a checkerboard.
  • size is sm, md or lg; shape is square or circle.
  • Not interactive and not focusable. Do not use it as a button.
Example source · show
import { ColorSwatch } from './color-swatch'

const colors = ['#ef4444', '#f59e0b', '#22c55e', '#06b6d4', '#6366f1', '#d946ef', 'rgba(15, 23, 42, 0.4)']

export const styles = {
  Square: () => (
    <div className="flex gap-2">
      {colors.map((c) => <ColorSwatch key={c} color={c} />)}
    </div>
  ),
  Circle: () => (
    <div className="flex items-center gap-2">
      <ColorSwatch color="#6366f1" shape="circle" size="sm" />
      <ColorSwatch color="#6366f1" shape="circle" size="md" />
      <ColorSwatch color="#6366f1" shape="circle" size="lg" />
    </div>
  ),
}

Source: packages/ui/src/color-swatch/color-swatch.tsx

Catalog

Category
color
Priority
Core
Primitive
react-aria
React Aria
ColorSwatch