Tag
Also see /react/tag
React component
Tag button
Combine .bf-button with .bf-tag to get a tag-styled <button>. Mark as selected with .bf-button-filled.
If clicks on a tag should navigate to a new URL, style a link as a Tag instead.
<button class="bf-tag bf-button">tag button</button> <button class="bf-tag bf-button bf-button-filled">selected tag</button><button class="bf-tag bf-button">tag button</button> <button class="bf-tag bf-button bf-button-filled">selected tag</button>
Compact Tag
Use .bf-tag-compact for a smaller tag.
<button class="bf-tag bf-tag-compact bf-button">compact tag</button> <button class="bf-tag bf-tag-compact bf-button bf-button-filled"> selected tag </button><button class="bf-tag bf-tag-compact bf-button">compact tag</button> <button class="bf-tag bf-tag-compact bf-button bf-button-filled"> selected tag </button>
Inactive
Avoid using <button disabled>, and let the tag be clickable and focusable, and style it as an inactive tab with .bf-button-inactive.
<button class="bf-tag bf-button bf-button-inactive">inactive tag</button> <button class="bf-tag bf-tag-compact bf-button bf-button-inactive"> compact </button><button class="bf-tag bf-button bf-button-inactive">inactive tag</button> <button class="bf-tag bf-tag-compact bf-button bf-button-inactive"> compact </button>