p Labels are formatted text tags for highlighted, informative information.

.docs-demo.columns
  .column
    span.label.mr-1 default label
    span.label.label-primary.mr-1 primary label
    span.label.label-secondary.mr-1 secondary label
    span.label.label-success.mr-1 success label
    span.label.label-warning.mr-1 warning label
    span.label.label-error error label
  
p
  | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
  | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <!-- normal labels -->
      <span class="label">default label</span>
      <span class="label label-primary">primary label</span>

.docs-demo.columns
  .column
    span.label.label-rounded.mr-1 default label
    span.label.label-rounded.label-primary primary label

p
  | Add the #[code label-rounded] class to have rounded labels.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <!-- rounded labels -->
      <span class="label label-rounded label-primary">primary label</span>