Loading

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


Badge

1 2 3 4 5 6 7


Outline badge

1 2 3 4 5 6 7


<div class="example">
 <span class="label">Default</span>
 <span class="label success">Success</span>
 <span class="label error">Error</span>
 <span class="label warning">Warning</span>
 <span class="label focus">Focus</span>
 <span class="label black">Black</span>
 <span class="example-inverted-box"><span class="label inverted">Inverted</span></span>
</div>


Customise

You can customise your labels very easily, just add a few lines of scss

<!-- 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>