Labels are of six types:

  • Standard (gray background)
  • Primary (solid primary color background)
  • Success (solid success color background)
  • Warning (solid warning color background)
  • Danger (solid danger color background)
  • Info (solid info color background)

Use them as you would normally use a button - anchor links, input, submit etc..

This is a label in a paragraph
with a line break to add another row.

Label Standard Label Primary Label Secondary Label Success Label Warning Label Danger Label Info

Water discovered on mars New

Breaking News LIVE

Example Code:

<!-- Outline (Standard) Buttons: -->
<a class="button" href="#">Anchor button standard</a>
<button>Button element standard</button>
<input type="submit" value="submit input standard">
<input type="button" value="button input standard">

<!-- Primary Buttons: -->
<a class="button button-primary" href="#">Anchor button primary</a>
<button class="button-primary">Button element primary</button>
<input class="button-primary" type="submit" value="submit input primary">
<input class="button-primary" type="button" value="button input primary">

<!-- Success Buttons: -->
<a class="button button-success" href="#">Anchor button success</a>
<button class="button-success">Button element success</button>
<input class="button-success" type="submit" value="submit input success">
<input class="button-success" type="button" value="button input success">

<!-- Warning Buttons: -->
<a class="button button-warning" href="#">Anchor button warning</a>
<button class="button-warning">Button element warning</button>
<input class="button-warning" type="submit" value="submit input warning">
<input class="button-warning" type="button" value="button input warning">

<!-- Danger Buttons: -->
<a class="button button-danger" href="#">Anchor button danger</a>
<button class="button-danger">Button element danger</button>
<input class="button-danger" type="submit" value="submit input danger">
<input class="button-danger" type="button" value="button input danger">

<!-- info Buttons: -->
<a class="button button-info" href="#">Anchor button info</a>
<button class="button-info">Button element info</button>
<input class="button-info" type="submit" value="submit input info">
<input class="button-info" type="button" value="button input info">