<arc-color-swatch> Overview
Guidelines
When to use
- Use in a flex or grid row to display a palette of related colours
- 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 colours, neutrals, semantic colours
- Use hex values for consistency in token reference docs
When not to use
- Use colour swatches for interactive colour picking — this is a display-only component
- Set transparent or semi-transparent colours without a visible background behind the swatch
- Mix different swatch sizes in the same row — keep sizes consistent within a group
- Use very long labels that will be truncated — keep labels under 10 characters
- Rely solely on colour to convey meaning — always pair with a label
Features
- Accepts any CSS colour value (hex, rgb, hsl, named) via the color property
- Auto-displays the colour 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
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';
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch><script setup>
import { ColorSwatch } from '@arclux/arc-ui-vue';
</script>
<template>
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch>
</template><script>
import { ColorSwatch } from '@arclux/arc-ui-svelte';
</script>
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch>import { Component } from '@angular/core';
import { ColorSwatch } from '@arclux/arc-ui-angular';
@Component({
imports: [ColorSwatch],
template: `
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch>
`,
})
export class MyComponent {}import { ColorSwatch } from '@arclux/arc-ui-solid';
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch>import { ColorSwatch } from '@arclux/arc-ui-preact';
<ColorSwatch color="#4d7ef7" label="Primary"></ColorSwatch>
<ColorSwatch color="#8b5cf6" label="Violet"></ColorSwatch><!-- 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
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | '#4d7ef7' | Any valid CSS colour value applied as the swatch background |
label | string | '' | Display label below the swatch; falls back to the colour value if empty |
size | 'sm' | 'md' | 'lg' | 'md' | Controls swatch dimensions: sm (32px), md (48px), lg (64px) |