GOV
Labels and Badges
Labels, tags, badges, counts, etc
Overview
Labels are our way of drawing attention to things like counts, tags, states, etc.
Default Primary Success Alert Error
Labels (5 lines)
1
2
3
4
5
2
3
4
5
<span class="label">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-alert">Alert</span> <span class="label label-error">Error</span>
Inverted
Not technically inverted, but kind of.
Default Primary Success Alert Error
Inverted Labels (8 lines)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<!--- Labels, badges, etc (inverted) ---> <p> <span class="label label-invert">Default</span> <span class="label label-invert label-primary">Primary</span> <span class="label label-invert label-success">Success</span> <span class="label label-invert label-alert">Alert</span> <span class="label label-invert label-error">Error</span> </p>
With Icon
Success Alert Error
Labels with icons (15 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--- Labels (with icons) ---> <p> <span class="label label-success"> <span class="glyphicons glyphicons-thumbs-up"></span> Success </span> <span class="label label-alert"> <span class="glyphicons glyphicons-alert"></span> Alert </span> <span class="label label-error"> <span class="glyphicons glyphicons-circle-exclamation-mark"></span> Error </span> </p>
Feedback is anonymous.
