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>