Labels

Label things with all sorts of labels

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>

Published by using 125 words.