Tag

sm

通常よりも小さなサイズです。限られたスペースにタグを配置する場合かつアクションの重要性が低い場合に使用します。

md (default)

タグのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのタグはノーマルを基準に重要度に応じて使用します。

lg

大きなタグはアクションの重要性を高めるため、使用は極力控えてください。

Solid

背景色が付与されているスタイルです。全てのスタイルの中で最も目立つように設計されています。

Outline

枠線とテキストのみのタグです。情報の優先度が低い情報に使用するためのスタイルです。

Subtle

枠線がないスタイルのタグです。副次的な情報に使用します。

Neutral

状態を持たない中立なタグです。いずれのStatusにも該当しない場合にはNeutralを使用します。

Info

重要度が高い情報をユーザーに伝える際に使用するタグです。

Success

ポジティブな情報をユーザーに伝える際に使用するタグです。

Warning

警告的文脈を含む情報をユーザーに伝える際に使用するタグです。

Negative

ネガティブな情報をユーザーに伝える際に使用するタグです。

タグの最小幅は40px(sm),48px(md),56px(lg)です。最小幅が存在することで、ユーザーが適切に視認することをサポートします。

タグのラベルが長すぎてコンテナーの使用可能なスペースに収まらない場合は、省略記号を使用してラベルが省略されます。ホバー時にツールチップに完全なラベルが表示されます。

• Vertical Resizing: Fixed
• Horizontal Resizing: Hug
• Container Height: 20px
• padding Vertical: 0px
• padding Horizontal: 4px

• Vertical Resizing: Fixed
• Horizontal Resizing: Hug
• Container Height: 24px
• padding Vertical: 2px
• padding Horizontal: 8px

• Vertical Resizing: Fixed
• Horizontal Resizing: Hug
• Container Height: 32px
• padding Vertical: 4px
• padding Horizontal: 8px

タグのラベルは簡潔に記述し、改行しないでください。