---
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: