Tag

分類や選択した条件を短く示します。

暮らし読書会仕事場の記事公開済み確認中
色ごとのタグ
分類なし読書会公開済み確認中要対応
分類へ移動するタグ
解除できるタグ
暮らし読書会要対応
狭い場所で折り返す
初めて仕事場を利用する方へのご案内https://example.com/articles/autumn-reading-club-2026秋の読書会の参加者向け
右から左に読む場合
الحياةنادي القراءةالفعالياتقيد المراجعة

使いどころ

  • 記事の分類や、選んだ絞り込みの条件を短く示す時に使います。
  • 公開中・確認待ちなどの状態は、濃い塗りの Badge で示します。Tagは枠の付いた角の小さな四角で、分類を示します。
  • 利用者が自由に書いてタグを追加する入力欄は TagInput を使います。

使い方

label を渡します。Highriseのタグと同じく、面を塗らない小さな四角に1pxの淡い灰色(#dddddd)の枠と角丸2pxを付け、文字は11pxの灰色(#666666)の通常の太さです。一行の高さは約19pxです。accent は blue・green・amber・coral から選び、HighriseのDealsの色付きのタグと同じく、その色の平らな塗りに白い文字で示します(色は Badge と同じ)。data-current="true" を渡すと、灰色(#747474)の塗りに白い文字で強調します。

href を渡すと分類へ移るリンクになります。下線は引かず、ホバーすると枠を一段濃くし、淡い灰色の面を敷きます。

removeButton を渡すとタグの末尾に、タグの文字と同じ色の小さな×ボタン(18px)を置きます。解除した後の処理は利用側が行います。href と removeButton は同時に使えません。

複数のタグは TagGroup で囲みます。タグの間を4pxに詰めて折り返し、長い文言も省略しません。

Tag は class・id などのHTML属性をタグのルート(href がある時は a、それ以外は span)に渡します。JavaScriptは使いません。

アクセシビリティ

  • TagGroup は role="group" で、label を名前にします。
  • 解除の操作はアイコンだけのボタンなので、「暮らしを解除」のように何を解除するかを aria-label で付けます。
  • accent の色は見分けの補助です。意味は文言で伝えます。

API

Tag

HTML属性はルート(リンクの時はa、それ以外はspan)に渡す。

Tagのprops
名前型既定値説明
label必須stringタグの文言。長い文言は省略せずに折り返す。
accentAccent塗りの色。分類を見分けるために使い、その色の塗りに白い文字にする。渡さなければ淡い灰色の枠と灰色の文字のタグにする。
hrefstring渡すとタグを分類へ移るリンクにする。removeButtonとは同時に使えない。
removeButton形によるChildタグの末尾に置く解除操作。空のButton(variant="link"・size="tag"・class="remove"・ data-icon-only="true")に「〇〇を解除」のaria-labelを付けて渡すと、×のアイコンを描く。解除した後の処理は利用側が持つ。

ほかに、<a>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/tag.css

Accent

値:"blue" | "green" | "amber" | "coral"

TagGroup

TagGroupのprops
名前型既定値説明
label必須stringまとまりの名前。role="group"のaria-labelにする。
childrenChild並べる Tag。

ほかに、<div>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/tag-group.css

コード

HTML
Hono JSX