Tabs

Basic tabs

Use <button class="bf-tab"> inside .bf-tabs and .bf-tabs-container to style tab buttons. Mark a tab as active with .bf-tab-active:

Styled variant

Add .bf-tabs-styled on the container for an alternative styling.

Link tabs

Links inside .bf-tabs will render as tab buttons. Mark a link tab as active with .active.

No background

Active tab background

To set background of active tab for .bf-tabs-styled variant use --bf-tabs-content-bg variable. Make sure to match background with your content.

Badge in Tabs

You can include a badge inside tab labels. Add margin so the badge doesn't stick to the text.