CSS reference - Bifrost

Design React CSS

Figma

Tag

Go to top

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.

HTML

<button class="bf-tag bf-button bf-button-neutral">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.

HTML

<button class="bf-tag bf-tag-compact bf-button bf-button-neutral">
  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.

HTML

<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

Open 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 bf-button-neutral">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 bf-button-neutral"
  >
    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>