Skip to main content
View source

ColorScales

The five Radix scales as a table of click-to-copy swatches, each labelled with its step number.

Usage

svelte 
<script lang="ts">
  import { ColorScales } from "@milandekruijf/ui/svelte";
</script>

<ColorScales
  copyLabel={(value) => `Copy ${value}`}
  copiedLabel="Copied"
/>

Examples

Click-to-copy palette
slate
blue
amber
green
red 
<script lang="ts">
  import { ColorScales } from "@milandekruijf/ui/svelte";
</script>

<ColorScales />

Props

PropTypeDefaultDescription
copyLabel?(value: string) => string—
Accessible label for a swatch, given its token (e.g. `Copy slate.9`); pass a localized function.
copiedLabel?string"Copied"
Announced right after a swatch copies its token; also used as its tooltip.
class?string—
Extra classes merged on the root.

Click a swatch to copy its token (e.g. `slate.9`). The five Radix scales and their twelve steps are fixed; pair it with the step-role legend.