Labels

Labels have all standard Kube styling options available: outline, states (success, error, warning), inverted color, and more. You can also customize labels to your requirements, and place them inside other elements, such as buttons, for example.

Base

Default   Success   Error   Warning   Focus   Black   Inverted

Outline

Default   Success   Error   Warning   Focus   Black   Inverted

Upper

Default   Success   Error   Warning   Focus   Black   Inverted

Tag

Default   Success   Error   Warning   Focus   Black   Inverted

Badges

Labels are ideal for use as badges with badge class.

1 2 3 4 5 6 7

Outline Badges

1 2 3 4 5 6 7

Custom

You can use mixins to customize your labels and badges.

Label   1   Tag
<!-- scss -->
.label.custom {
    // $text-color, $back-color
    @include label(#fff, #ea48a7);
}

<!-- html -->
<span class="label custom">Label</span>
<span class="label badge custom">1</span>
<span class="label tag custom">Tag</span>