Tag

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>

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>

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>

Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding bf-inline">
  <button type="button" class="bf-tag bf-button">Tag</button>
  <button type="button" class="bf-tag bf-button bf-button-filled">Selected</button>
  <button type="button" class="bf-tag bf-tag-compact bf-button">Compact</button>
  <button type="button" class="bf-tag bf-tag-compact bf-button bf-button-filled">
    Compact selected
  </button>
  <button type="button" class="bf-tag bf-button bf-button-inactive">Inactive</button>
</div>