Labels

Labels

Labels are formatted text tags for highlighted, informative information.

default label

Add the label class to <span> or <small> elements.

Available label colors

There are labels of all the Spectre.css colors, and to use them add the label- class with a color name, for example label-primary-dark.

Code Available Dark Light
Dark dark
Light light
Accent accent
Primary primary
Secondary secondary
Gray gray
Bg bg
Border border
Link link
Disabled disabled
Error error
Info info
Success success
Body bg body-bg
Body font body-font
Code code
Highlight highlight

Label colors

Shades
dark labellight label
<!-- Dark & Light colors -->
<span class="label label-dark">dark label</span>
<span class="label label-light">light label</span>
Label color - Accent
accent label
<!-- Accent color -->
<span class="label label-accent">accent label</span>
Label color - Primary

You can add another class label-primary, label-primary-dark, label-primary-light for labels colored with primary colors.

primary labelprimary label darkprimary label light
<!-- Primary color labels -->
<span class="label label-primary">primary label</span>
<span class="label label-primary-dark">primary label dark</span>
<span class="label label-primary-light">primary label light</span>
Label color - Secondary

You can add another class label-secondary, label-secondary-dark, label-secondary-light for labels colored with secondary colors.

secondary labelsecondary label darksecondary label light
<!-- Secondary color labels -->
<span class="label label-secondary">secondary label</span>
<span class="label label-secondary-dark">secondary label dark</span>
<span class="label label-secondary-light">secondary label light</span>
Label color - Gray

You can add another class label-gray, label-gray-dark, label-gray-light for labels colored with gray colors.

gray labelgray label darkgray label light
<!-- Gray color labels -->
<span class="label label-gray">gray label</span>
<span class="label label-gray-dark">gray label dark</span>
<span class="label label-gray-light">gray label light</span>
Label color - Bg

You can add another class label-bg, label-bg-dark, label-bg-light for labels colored with bg colors.

bg labelbg label darkbg label light
<!-- Bg color labels -->
<span class="label label-bg">bg label</span>
<span class="label label-bg-dark">bg label dark</span>
<span class="label label-bg-light">bg label light</span>
Label color - Border

You can add another class label-border, label-border-dark, label-border-light for labels colored with border colors.

border labelborder label darkborder label light
<!-- Border color labels -->
<span class="label label-border">border label</span>
<span class="label label-border-dark">border label dark</span>
<span class="label label-border-light">border label light</span>

You can add another class label-link, label-link-dark, label-link-light for labels colored with link colors.

link labellink label darklink label light
<!-- Link color labels -->
<span class="label label-link">link label</span>
<span class="label label-link-dark">link label dark</span>
<span class="label label-link-light">link label light</span>
Label color - Control

You can add another class label-disabled, label-error, label-info, label-success and label-warning for colored labels.

disabled labelerror labelinfo labelsuccess labelwarning label
<!-- Control color labels -->
<span class="label label-disabled">disabled label</span>
<span class="label label-error">error label</span>
<span class="label label-info">info label</span>
<span class="label label-success">success label</span>
<span class="label label-warning">warning label</span>
Label color - Body

You can add another class label-body-bg or label-body-font for labels body colors colored.

body-bg labelbody-font label
<!-- Body color labels -->
<span class="label label-body-bg">body-bg label</span>
<span class="label label-body-font">body-font label</span>
Label color - Other

You can add another class label-code or label-highlight for labels colored.

code labelhighlight label
<!-- Other color labels -->
<span class="label label-code">link label</span>
<span class="label label-highlight">highlight label</span>

Label sizes

There are labels with the size changed by padding, and to use it add the .label class with a size, for example .label-sm. You can mix it with any color above.

xs sm md lg xl 2x
primary extra small label
primary small label
primary medium label
primary large label
primary extra large label
<!-- Sized labels -->
<span class="label label-primary label-xs">primary extra small label</span>
<span class="label label-primary label-sm">primary small label</span>
<span class="label label-primary label-md">primary medium label</span>
<span class="label label-primary label-lg">primary large label</span>
<span class="label label-primary label-xl">primary extra large label</span>

Rounded labels

default labelprimary label

Add the label-rounded class to have rounded labels. You can mix it with, rounded, any size and color above.

<!-- rounded labels -->
<span class="label label-rounded label-primary">primary label</span>

Bordered labels

Add the border class to have bordered labels. You can mix it with any size and color above.

xs sm md lg xl 2x
Border sizes

Add the border-lg class to have large border.

border labelborder large label
<!-- Bordered labels -->
<span class="label border">border label</span>
<span class="label border-lg">border large label</span>

Add the border-light or border-dark class to have light or dark color border. And also add to each shade -lg for large size.

border light labelborder light large labelborder dark labelborder dark large label
<!-- Bordered labels -->
<span class="label label-border border-light">border light label</span>
<span class="label label-border border-light-lg">border light large label</span>
<span class="label label-border-light border-dark">border dark label</span>
<span class="label label-border-light border-dark-lg">border dark large label</span>

You can add new border variants with a mixin or modify border colors by changing CSS variables, and sizes by changing CSS variables.