Label

Labels have all standard Kube states (default, secondary, tertiary), so this makes them convenient for placing different accents as is. But the essential feature is customization. You can easily make your labels with colors you prefer.

Primary

Draft  Rejected  Status  Approved  Pending 
<span class="label">Draft</span>
<span class="label is-error">Rejected</span>
<span class="label is-focus">Status</span>
<span class="label is-success">Approved</span>
<span class="label is-warning">Pending</span>

Secondary

Draft  Rejected  Status  Approved  Pending 
<span class="label is-secondary">Draft</span>
<span class="label is-error is-secondary">Rejected</span>
<span class="label is-focus is-secondary">Status</span>
<span class="label is-success is-secondary">Approved</span>
<span class="label is-warning is-secondary">Pending</span>

Tertiary

Draft  Rejected  Status  Approved  Pending 
<span class="label is-tertiary">Draft</span>
<span class="label is-error is-tertiary">Rejected</span>
<span class="label is-focus is-tertiary">Status</span>
<span class="label is-success is-tertiary">Approved</span>
<span class="label is-warning is-tertiary">Pending</span>

Removable

Draft   Approved   Pending  
<span class="label">Draft <span class="close"></span></span>
<span class="label is-success is-secondary">Approved <span class="close"></span></span>
<span class="label is-warning is-tertiary">Pending <span class="close"></span></span>

Hoverable

<a href="#" class="label">Draft</a>
<a href="#" class="label is-error is-secondary">Rejected</a>
<a href="#" class="label is-focus is-tertiary">Status</a>

Badge Primary

The .is-badge modifier makes the label round.

2  2  2  2  2 
<span class="label is-badge">2</span>
<span class="label is-badge is-error">2</span>
<span class="label is-badge is-focus">2</span>
<span class="label is-badge is-success">2</span>
<span class="label is-badge is-warning">2</span>

Badge Secondary

2  2  2  2  2 
<span class="label is-badge is-secondary">2</span>
<span class="label is-badge is-error is-secondary">2</span>
<span class="label is-badge is-focus is-secondary">2</span>
<span class="label is-badge is-success is-secondary">2</span>
<span class="label is-badge is-warning is-secondary">2</span>

Badge Tertiary

2  2  2  2  2 
<span class="label is-badge is-tertiary">2</span>
<span class="label is-badge is-error is-tertiary">2</span>
<span class="label is-badge is-focus is-tertiary">2</span>
<span class="label is-badge is-success is-tertiary">2</span>
<span class="label is-badge is-warning is-tertiary">2</span>

Custom

You can use the mixin make-label to customize your labels and badges.

Custom  Custom   2  Secondary  Tertiary
// scss
.label.label-custom {
    @include make-label(#7b2ed7);
}

// html
<span class="label label-custom">Custom</span>
<span class="label label-custom is-badge">2</span>
<span class="label label-custom is-secondary">Secondary</span>
<span class="label label-custom is-tertiary">Tertiary</span>