Tag

Tag button

Combine .bf-button with .bf-tag to get a tag-styled <button>. Mark as selected with .bf-button-filled or unselected with .bf-button-neutral.

If clicks on a tag should navigate to a new URL, style a link as a Tag instead.

Compact Tag

Use .bf-tag-compact for a smaller tag.

Inactive

Avoid using <button disabled>, and let the tag be clickable and focusable, and style it as an inactive tab with .bf-button-inactive.