Chip
Chip は、ラベルのような見た目でユーザーのインタラクションを受け付けるコンポーネントです。
1. 概要 (Overview)
説明
コンテンツなど流動性の高いものに対するアクションを表現します。静的な Sticker に対して、Chip はインタラクティブなコンポーネントという位置付けです。押せる感・手元感を強調するため、Sticker よりも丸い形状をしています。
リンク
2. 構成要素 (Anatomy)
対象を簡潔に言い表すラベルテキストを、角の丸いコンテナで囲んで構成します。テキストのサイズや余白は Size をもとに、Flavor で指定した Typography の設定から自動的に算出されます。
3. 使い分け (Usage)
いつ使うか
- カテゴリーやタグによる絞り込み、検索条件の表示・解除、入力値の候補の提示など、コンテンツに応じて動的に変化する選択肢やアクションを提示するとき
いつ使わないか
類似コンポーネントとの違い
- Sticker: オブジェクトに対する付加的な情報を表示する静的なコンポーネント。区別のため Sticker は矩形寄りの角丸、Chip はより丸い形状とする。
- Button: 画面に対して固定的なアクションのトリガー。Chip はコンテンツなど流動性の高いものに対するアクションに用いる。
4. バリエーション (Variants)
Color
色を決定します。
| Modifier class | |
|---|---|
| Informative | .-color-informative |
| Neutral* | .-color-neutral |
| Positive | .-color-positive |
| Notice | .-color-notice |
| Negative | .-color-negative |
| Attention | .-color-attention |
Size
サイズを決定します。
| Modifier class | |
|---|---|
| XS | .-size-xs |
| S | .-size-s |
| M* | .-size-m |
| L | .-size-l |
| XL | .-size-xl |
Skeleton
コンテンツの読み込み中は、Chip と同じ形状の Skeleton を表示できます。
5. ステート (States)
Enabled
特に何もアクションしていないデフォルトの状態です。
Hover
Overlay Color を重ねて選択しようとしていることを示します。
Active
押下されている状態を示します。
Focused
フォーカスされていることを示します。
Disabled
透明度を上げて、インタラクションが不可能なことを示します。
6. アクセシビリティ (Accessibility)
このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。
- 役割に応じて
<button>や<a>など適切なインタラクティブ要素でマークアップし、見た目だけでボタンやリンクを表現しない - 絞り込みなどで選択状態を持つ場合は、
aria-pressedなどで選択状態を支援技術に伝え、色だけで選択状態を表現しない - 十分なタップターゲットを確保する
7. ライティング (Writing)
- ラベルは対象のカテゴリーや条件を簡潔に言い表す短い名詞にする
- 同じグループ内の Chip はラベルの粒度や文体を揃える