Composant · Données

ColorSwatch

Stable

Pastille affichant une couleur arbitraire — hex, rgb(), oklch() ou un token CSS var(--st-…). Contrairement à Tag/Badge (limités aux tons category1…8), la couleur passée en prop est rendue via un background en ligne : c'est la raison d'être du composant (palette-picker, légende d'échelle). Le reste du style reste token-only.

Exemples

Carrés avec libellé hex, cercles oklch() et une pilule sur token DS.

Pastilles de couleur

#2563eb #16a34a #f59e0b #dc2626

Token DS

Voir le code (Svelte)

<div class="swatch-demo-col">
  <div class="swatch-demo-row">
    <ColorSwatch color="#2563eb" label="#2563eb" />
    <ColorSwatch color="#16a34a" label="#16a34a" />
    <ColorSwatch color="#f59e0b" label="#f59e0b" />
    <ColorSwatch color="#dc2626" label="#dc2626" />
  </div>
  <div class="swatch-demo-row">
    <ColorSwatch color="oklch(0.7 0.15 250)" shape="circle" size={32} />
    <ColorSwatch color="oklch(0.7 0.15 160)" shape="circle" size={32} />
    <ColorSwatch
      color="var(--st-semantic-action-primary)"
      shape="pill"
      size={40}
      label="Token DS"
    />
  </div>
</div>

API du composant

Prop	Type	Défaut	Description
`color`	`string`	—	Couleur arbitraire (hex/rgb/oklch/token), rendue en ligne.
`size`	`number`	`24`	Côté de la pastille en pixels.
`shape`	`'square' \| 'circle' \| 'pill'`	`'square'`	Forme de la pastille.
`label`	`string`	–	Libellé optionnel affiché à côté.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

Accessibilité : aria-label dérivé du label, sinon de la couleur.

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Bordure de la pastille.
`--st-radius-sm` / `--st-radius-pill`	Rayon selon la forme.
`--st-spacing-2`	Écart entre la pastille et le libellé.