Skip to contentAsheeUIAsheeUI

ColorSwatch

A labelled block of one colour, used for palette previews, role pickers and theme cards.

Umbrella

The portable contract both renderers implement.

Shared

Install

npm install asheeui @asheeui/web

Import

import { ColorSwatch } from "asheeui";

The same props and the same cascade as the web; the implementation is the platform's.

One contract and a real implementation on both platforms.

The umbrella is the intersection; see the portable surface for the complete list and the monorepo guide for wiring one shared kit to both applications.

The live examples below run the web branch in this browser. The umbrella is the contract both branches implement; open Web for the browser's extra APIs and Native for the device's behaviour.

A ColorSwatch is one colour shown as a square. It is a preview rather than a control: it has no press, focus or selected state, and it is the shape a palette picker, a role row or a theme card builds on.

Usage

import { ColorSwatch } from "asheeui";

<ColorSwatch color="#2563eb" label="Primary" />;

The colour is data, so it is painted with a style value rather than a class name. That is what lets a runtime theme put a reader's hex value here without generating a Tailwind class per colour. The component expects a portable value (#rgb, #rrggbb, rgb()); an invalid value paints nothing.

size and radius are the framework's shared token names, so a swatch follows the product's density and corner language:

<ColorSwatch color="#0ea5e9" size="lg" radius="full" label="Ocean" />

Labelled or decorative

label decides how the swatch appears to assistive technology.

  • With a label, the swatch is one image whose accessible name is the label. Use it when the colour is the information, a palette role, a saved theme's primary colour, a selected colour.
  • Without a label, the swatch is decoration and is hidden from assistive technology. Use it when the surrounding text already names the colour, a role row whose next cell says Primary, for example.

A label is not a tooltip: it is never drawn on screen and does not replace visible text. If a reader needs to know which role a colour belongs to, put that in the surrounding layout as well.

Props

color is required and is the only data prop. size is sm, md or lg (default md); radius accepts the shared radius names and defaults to sm. className reaches the rendered element on both platforms.

Accessibility

  • A labelled swatch exposes role="img" with the label as its accessible name on the web, and accessibilityRole="image" plus accessibilityLabel on a device.
  • An unlabelled swatch is hidden: aria-hidden on the web and not accessible on native. It never adds a nameless image to the accessibility tree.
  • The colour itself is not announced, so the label has to carry the meaning. Primary is useful; #2563eb is not.
  • There is no interaction state. If the swatch is part of a choice, wrap it in a Chip, Button or another control and let that control carry the press and selected semantics.