コンポーネント
Badge
バッジ。状態や分類を短い語で示す
色は宣言から来ます
中立は凹んだ面を宣言します。 色付きは淡い塗りを使います。 どちらも背景と文字が対で決まっているので、背景だけを塗る道はありません。
<Badge>中立</Badge>
<Badge tone="danger">危険</Badge>トーンは塗りを持つものすべて（accent / danger / warning / success / info）に加えて、
色を持たない neutral があります。既定は neutral です。
枠線が付きます
凹んだ面の上に置くと、中立のバッジは背景と同じ色になります。 面の段は凹んだところで底に着くので、その上に凹んだ面を宣言しても深くなりません。
境界があれば、背景が同じでもバッジの輪郭が読めます。
Badge は押せません
hover も focus も持ちません。押せるようにしたいなら Button を使ってください。
リンクにしたいときは asChild で a を渡せます。そのときも見た目は変わりません——
押せることが見た目から分からないので、押す前提の導線には向きません。
<Badge asChild>
<a href="/tags/x">タグへ</a>
</Badge>大きさは2段です
小さい方は表の行や見出しの脇に、大きい方は本文と並べて使います。
折り返しません
バッジは1行に収まる前提です。長い語は枠の側で切るか、そもそも短い語だけを載せてください。
3つの状態
通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。
通常default.tsx
通常。色は宣言から来る。
中立強調危険注意成功情報
小さい方表の行の脇に大きい方本文と並べて
空empty.tsx
空。中身が無くても枠は潰れない。
エッジケースedge.tsx
エッジケース。長い語と、面の上での見え方。
凹んだ面の上
使い方
3つの状態とは別に、説明のために置いている例です。
要素の差し替えas-child.tsx
バッジをリンクにする。
props
Prop
Type
型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。