+++ date = "2017-04-10T16:40:43+01:00" title = "Labels" draft = false weight = 80 description = "Label things with all sorts of labels" bref = "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" toc = true +++
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
Badges
Labels are ideal for use as badges with badge class.
Outline Badges
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>