Badges allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, badges should appear dynamically as a group of multiple interactive elements.
Contextual variations
You can change the color of the badge according to the type of information you need to display. Just pick one in the color schemes.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
custom
COPY
<span class="badge mb-1 bg-primary">Primary</span>
<span class="badge mb-1 bg-secondary">Secondary</span>
<span class="badge mb-1 bg-success">Success</span>
<span class="badge mb-1 bg-danger">Danger</span>
<span class="badge mb-1 bg-warning">Warning</span>
<span class="badge mb-1 bg-info">Info</span>
<span class="badge mb-1 bg-light text-dark">Light</span>
<span class="badge mb-1 bg-dark">Dark</span>
<span class="badge mb-1 text-white bg-axa-teal">custom</span>
With icons
Breadcrumb links are represented by the colour sienna and if the label is too large it can be truncated using an ellipsis.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
custom
COPY
<span class="badge mb-1 bg-primary">
<i class="icon-add valign-btn-icon me-1"></i>Primary
</span>
<span class="badge mb-1 bg-secondary">
<i class="icon-add valign-btn-icon me-1"></i>Secondary
</span>
<span class="badge mb-1 bg-success">
<i class="icon-add valign-btn-icon me-1"></i>Success
</span>
<span class="badge mb-1 bg-danger">
<i class="icon-add valign-btn-icon me-1"></i>Danger
</span>
<span class="badge mb-1 bg-warning">
<i class="icon-add valign-btn-icon me-1"></i>Warning
</span>
<span class="badge mb-1 bg-info">
<i class="icon-add valign-btn-icon me-1"></i>Info
</span>
<span class="badge mb-1 bg-light text-dark">
<i class="icon-add valign-btn-icon me-1"></i>Light
</span>
<span class="badge mb-1 bg-dark">
<i class="icon-add valign-btn-icon me-1"></i>Dark
</span>
<span class="badge mb-1 text-white bg-axa-teal">
<i class="icon-add valign-btn-icon me-1"></i>custom
</span>
Size
@AXA new class for smaller badges: badge-sm
Primary
Secondary
Primary
Secondary
COPY
<span class="badge mb-1 badge-sm bg-primary">Primary</span>
<span class="badge mb-1 badge-sm bg-secondary"
><i class="icon-add valign-btn-icon me-1"></i>Secondary</span
>
<span class="badge mb-1 bg-primary">Primary</span>
<span class="badge mb-1 bg-secondary"
><i class="icon-add valign-btn-icon me-1"></i>Secondary</span
>
Loading...