カラースウォッチColorSwatchExperimental
カラー値とトークン名を並べて表示し、必要に応じて値をコピーできます。
プレビュー
background
foreground
primary
muted
destructive
success
状態とバリエーション
トークン表示
デザイントークン名と実際の色を並べ、値をコピーできます。
background
foreground
primary
muted
サイズ
色だけを短く示す場合と、一覧で強調する場合でサイズを切り替えます。
primary
primary
primary
コピーなし
凡例など、コピー操作が不要な場所ではボタンを非表示にします。
成功
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| color | string | - | 表示とコピーに使う CSS カラー値です。 |
| label | string | - | カラー値の横に表示するラベルです。未指定時は color を表示します。 |
| copyable | boolean | true | カラー値をコピーするボタンを表示するかどうかです。 |
| copyLabel | string | - | コピー前のボタンラベルとツールチップです。 |
| copiedLabel | string | "Copied" | コピー後に一時表示するラベルです。 |
| copiedDuration | number | 5000 | コピー後のチェックアイコンとツールチップを維持する時間です。 |
| size | "sm" | "default" | "lg" | "default" | カラーチップの大きさです。 |
使い方
Loading...