Badge

A small visual element used to display statuses, categories, or alerts quickly and clearly. Ideal for highlighting information like "New," "Error," or "Beta."

Base

DEFAULT

<span class="badge">DEFAULT</span>

Colors

Set the badge color using the is-{color} class.

info

To see the available colors, check the Colors section.

PrimaryInfoSuccessWarning

<div class="is-flex is-gap-3">
  <span class="badge is-primary">Primary</span>
  <span class="badge is-info">Info</span>
  <span class="badge is-success">Success</span>
  <span class="badge is-warning">Warning</span>
</div>

Tonal

Adds a tonal background to the badge using the is-tonal class.

tip

You can combine it with colors, for example: is-tonal is-primary, is-tonal is-warning, etc.

Preview

PrimaryInfoSuccessWarningError

Code

<div class="is-flex is-gap-3 px-3 py-4 is-bg-base is-rounded-2">
  <span class="badge is-primary is-tonal">Primary</span>
  <span class="badge is-info is-tonal">Info</span>
  <span class="badge is-success is-tonal">Success</span>
  <span class="badge is-warning is-tonal">Warning</span>
  <span class="badge is-error is-tonal">Error</span>
</div>

Outlined

You can set the badge with borders and a white background using the is-outlined class.

Preview

PrimaryInfoSuccessWarningError

Code

<div class="is-flex is-gap-3">
  <span class="badge is-primary is-outlined">Primary</span>
  <span class="badge is-info is-outlined">Info</span>
  <span class="badge is-success is-outlined">Success</span>
  <span class="badge is-warning is-outlined">Warning</span>
  <span class="badge is-error is-outlined">Error</span>
</div>

Icons

You can add icons to the button using the <iconify-icon> component.

tip

For more information on how to use icons, check the Icons section.

Preview

Primary Info Error

Code

<div class="is-flex is-gap-3">
  <span class="badge is-primary is-outlined">
    <iconify-icon class="icon" icon="mdi:check"></iconify-icon>
    <span>Primary</span>
  </span>

  <span class="badge is-info">
    <span>Info</span>
    <iconify-icon class="icon" icon="mdi:info"></iconify-icon>
  </span>

  <span class="badge is-error is-tonal">
    <iconify-icon class="icon" icon="mdi:warning"></iconify-icon>
    <span>Error</span>
  </span>

  <span class="badge is-primary">
    <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
  </span>
</div>

Sizes

You can set the badge size using the is-md and is-lg classes.

Preview

PrimaryInfo

Code

<div class="is-flex is-gap-3 is-align-items-flex-start">
  <span class="badge is-primary is-md">Primary</span>
  <span class="badge is-info is-lg">Info</span>
</div>