Kobalte.v0.13.9

Color Swatch

Displays a preview of a selected color.

Import

ts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";
ts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";

Features

  • Localized color descriptions for screen reader users.

Anatomy

The color swatch consists of:

  • ColorSwatch: The root container for the color swatch.
tsx
<ColorSwatch />
tsx
<ColorSwatch />

Example

tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} />
);
}
tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} />
);
}

Usage

ColorSwatch accepts a value via the value prop. The value should be Color object. You can obtain a Color object by using the parseColor function to parse a color from a string.

Value

tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("#7f0000")} />
);
}
tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("#7f0000")} />
);
}

Custom Color Name

tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} colorName="Kobalte blue" />
);
}
tsx
import { ColorSwatch } from "@kobalte/core/color-swatch";
import { parseColor } from "@kobalte/utils";
import "./style.css";
function App() {
return (
<ColorSwatch class="ColorSwatchRoot" value={parseColor("hsl(200, 98%, 39%)")} colorName="Kobalte blue" />
);
}

API Reference

ColorSwatch

ColorSwatch is equivalent to the Root import from @kobalte/core/color-swatch.

PropDescription
valueColor
The color value to display in the swatch.
colorNamestring
A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).
translationsColorSwatchIntlTranslations
Localization strings.

Rendered elements

ComponentDefault rendered element
ColorSwatchdiv