Color Swatch
Color sample square with a label, for token docs.
<arc-color-swatch>Overview
ColorSwatch renders a color sample square with a label underneath, for design token documentation, palette displays, and theme previews. The color is set via the color property and applied directly as a background-color inline style, so it accepts any valid CSS color value: hex, rgb, hsl, or named colors.
The label defaults to displaying the color value itself when no explicit label is provided, which suits token reference tables. The label is rendered in monospace (--font-mono) at 11px with text overflow ellipsis, so long color names or values do not break the layout. The swatch box includes a subtle border and a hover effect that brightens the border and adds a blue glow shadow.
Three size presets (sm, md, lg) control the swatch dimensions: 32px, 48px, and 64px respectively. The border radius also scales with size: --radius-sm for small, --radius-md for medium, and --radius-lg for large. The color box includes role="img" with an aria-label for accessibility.
Guidelines
When to use
- Use in a flex or grid row to display a palette of related colors
- Provide a human-readable label for design token documentation (e.g. "Primary Blue")
- Use the lg size for hero palette displays and sm for inline token tables
- Group swatches by category: accent colors, neutrals, semantic colors
- Use hex values for consistency in token reference docs
When not to use
- Do not use color swatches for interactive color picking; this is a display-only component
- Do not set transparent or semi-transparent colors without a visible background behind the swatch
- Do not mix different swatch sizes in the same row; keep sizes consistent within a group
- Do not use very long labels that will be truncated. Keep labels under 10 characters
- Do not rely solely on color to convey meaning. Always pair with a label
Features
- Accepts any CSS color value (hex, rgb, hsl, named) via the color property
- Auto-displays the color value as the label when no explicit label is set
- Three size presets: sm (32px), md (48px), lg (64px) with matching border radii
- Hover effect with border brightening and blue glow shadow
- Monospace label with text-overflow ellipsis for long values
- `role="img"` with `aria-label` for screen reader accessibility
- CSS parts (swatch, color, label) for external styling
Preview
Blue
Violet
Success
Warning
Error
Usage
<arc-color-swatch color="#4d7ef7" label="Primary"></arc-color-swatch>
<arc-color-swatch color="#8b5cf6" label="Violet"></arc-color-swatch>import { ColorSwatch } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />
</>
);
}<script setup>
import { ColorSwatch } from '@arclux/arc-ui-vue';
</script>
<template>
<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />
</template><script>
import { ColorSwatch } from '@arclux/arc-ui-svelte';
</script>
<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />import { Component } from '@angular/core';
import { ColorSwatch } from '@arclux/arc-ui-angular';
@Component({
imports: [ColorSwatch],
template: `
<arc-color-swatch color="#4d7ef7" label="Primary"></arc-color-swatch>
<arc-color-swatch color="#8b5cf6" label="Violet"></arc-color-swatch>
`,
})
export class MyComponent {}import { ColorSwatch } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />
</>
);
}import { ColorSwatch } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-color-swatch — requires color-swatch.css + base.css (or arc-ui.css) -->
<span class="arc-color-swatch">
<div class="swatch">
<div
class="swatch__color"
style="background-color:Color"
role="img"
></div>
<span class="swatch__label"></span>
</div>
</span><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-color-swatch — self-contained, no external CSS needed -->
<style>
.arc-color-swatch .swatch__color:hover { border-color: rgb(51, 51, 64);
box-shadow: 0 0 12px rgba(77, 126, 247, 0.1); }
</style>
<span class="arc-color-swatch" style="display: inline-flex">
<div class="swatch" style="display: flex; flex-direction: column; align-items: center; gap: 8px">
<div
class="swatch__color" style="border-radius: 10px; border: 1px solid rgb(34, 34, 41)"
style="background-color:Color"
role="img"
></div>
<span style="font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(124, 124, 137); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"></span>
</div>
</span>API
colorstring'#4d7ef7'- Any valid CSS color value applied as the swatch background
labelstring''- Display label below the swatch; falls back to the color value if empty
size'sm' | 'md' | 'lg''md'- Controls swatch dimensions: sm (32px), md (48px), lg (64px)