Skip to main content

Badges

Badges or states, as you prefer to call them, can be used in your tables or other places. Here is an example of how to use them:

<span className="state is-primary">Primary</span>

There are several options available: default, primary, secondary, tertiary, danger, warning, success, info, white, gray, and dark.

Default badges​

DefaultPrimarySecondaryTertiaryDangerWarningSuccessInfoWhiteGrayDark
Other classes: is-primary, is-secondary, is-tertiary, is-danger, is-warning, is-success, and is-info.
<span class="state is-primary">
  Default
</span>

Outline badges​

You can use outline badges, which have only borders and no background, to add a different style. Here are some classes that you can use:

These classes can be used to create different colored outline badges.

is-primary-outline, is-secondary-outline, is-tertiary-outline, is-danger-outline, is-warning-outline, is-success-outline, and is-info-outline.

DefaultPrimarySecondaryTertiaryDangerWarningSuccessInfoWhiteGrayDark
<span class="state is-primary-outline">
  Outline
</span>

Semi transparent badges​

You can use semi-transparent badges by adding the class semi-transparent to add transparency to the background of badges, which can add a different style to your website.

PrimarySecondaryTertiaryDangerWarningSuccessInfoWhiteGrayDark
<span class="state is-primary semi-transparent">
  Semi-transparent
</span>

Badges with icons​

DefaultPrimarySecondaryTertiaryDangerWarningSuccessInfo
<span class="state has-icon is-primary">
  Primary <your-icon>
</span>

Just has the class has-icon and the icon.

Other styles​

DefaultFlatFull roundedSmallLarge
<span class="... is-flat">
  ...
</span>

<span class="... is-circle">
  ...
</span>

<span className="... is-small">
  ...
</span>
<span className="... is-large">
  ...
</span>