Color Swatch

A read-only color preview.

Anatomy

#default: Optional overlay or empty-state content. Receives color, cssColor, and isEmpty.

Usage

Formats and transparency

Show colors in different CSS formats. Transparent is a valid color, not an empty selection.

#ef4444

rgb(34 197 94 / 0.5)

oklch(0.7 0.2 250)

color(display-p3 1 0.2 0.4)

transparent

Decorative and custom content

Use decorative when nearby text names the color. Add an indicator through the default slot.

Available

Empty state

An empty or invalid color shows an empty swatch. CSS variables are not supported.

Examples

Formats and transparency

Show colors in different CSS formats. Transparent is a valid color, not an empty selection.

vue

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

Decorative and custom content

Use decorative when nearby text names the color. Add an indicator through the default slot.

vue

import './main.css'

Empty state

An empty or invalid color shows an empty swatch. CSS variables are not supported.

vue

<template>
  <Accordion
    :items="items"
    type="multiple"
  />
</template>

See the live demo's code for the state and style objects used in these examples.

Formats

ColorSwatch accepts the supported color formats. It shows the color without changing or returning a value.

Behavior

ColorSwatch is read-only and does not emit selection events. Set its size, border, and background pattern in your own styles. The component sets the color fill and --akaza-color CSS variable.

Use decorative beside text that names the color. Empty or unsupported values set data-akaza-empty. Transparent remains a valid color.

API Reference

Props

Prop	Type	Default	Purpose
`color`	`string`	`""`	Any supported CSS color literal.
`ariaLabel`	`string`	Color string, or No color	Accessible preview name.
`decorative`	`boolean`	`false`	Remove the image role and hide the preview from assistive technology.
`ui`	`ColorSwatchUi`	-	Root class.

Emits

ColorSwatch has no custom events. Native attributes and listeners apply to its root.

Slots

#default: Optional overlay or empty-state content. Receives color, cssColor, and isEmpty.

UI Options

Key	Element
`root`	Color preview

Styling Hooks

UI key	CSS class	Data attributes / semantics
`root`	`akaza-color-swatch`	`data-akaza-empty`; conditional `role="img"` / `aria-hidden`

Use class or ui.root to style the swatch.

Keyboard

ColorSwatch is not interactive and does not create a keyboard stop.

Parity Notes

ColorSwatch provides a color preview and an optional content slot. The supplied Base UI reference has no color swatch component.

Edit this page on GitHub ↗