---
name: labels-badges
url: /labels-badges
title: Labels Badges
---
Label & Badges
Basic HTML
Label
You can create Labels with this basic HTML:
Default Label
Success Label
Alert Label
Warning Label
Default Label
Success Label
Alert Label
Warning Label
Badge
Sass Mixins
Use these mixins to create custom labels and badges.
.custom-label {
@extend %label;
@include label-layout(
$fontsize: 1rem,
$padding: 0.25em
);
@include label-style(
$background: red,
$color: #fff,
$radius: 20px
);
}
.custom-badge {
@extend %badge;
@include badge-layout(
$fontsize: 1rem,
$padding: 0.25em
);
@include badge-style(
$background: red,
$color: #fff,
$radius: 1000px
);
}
Sass Variables
You can customize labels and badges with these variables in the _settings.scss
file:
// Label styles
$label-fontsize: 0.8rem;
$label-padding: ($global-padding / 3) ($global-padding / 2);
$label-radius: 0;
$label-background: $primary-color;
$label-color: isitlight($primary-color);
// Badge styles
$badge-fontsize: .8em;
$badge-padding: .1em .61em;
$badge-radius: $global-rounded;
$badge-background: $primary-color;
$badge-font-color: #fff;