Badges must have no interactive states so that they are not confused with buttons.
This component can use icons. For more information, check out the icons documentation.
To create a badge, simply add .joy-badge to a span element. Badges can include text and icons.
<span class="joy-badge">Badge</span>
<span class="joy-badge joy-badge--success">Badge</span>
<span class="joy-badge joy-badge--warning">Badge</span>
<span class="joy-badge joy-badge--error">Badge</span>In addition to the default size, badges come in a small size with a smaller font-size, less padding, but slightly bolder text (for better legibility).
Small badges should be used in content areas where badges are used inline with default text such as lists or nav links. See the badges tearsheet for more examples.
<span class="joy-badge joy-badge--small">Badge</span>
<span class="joy-badge joy-badge--small joy-badge--success">Badge</span>
<span class="joy-badge joy-badge--small joy-badge--warning">Badge</span>
<span class="joy-badge joy-badge--small joy-badge--error">Badge</span>An alternate outline style is available for badges by added .joy-badge--outline to span elements with the base .joy-badge class.
<span class="joy-badge joy-badge--outline">Badge</span>
<span class="joy-badge joy-badge--outline joy-badge--success">Badge</span>
<span class="joy-badge joy-badge--outline joy-badge--warning">Badge</span>
<span class="joy-badge joy-badge--outline joy-badge--error">Badge</span>Inverse badges are available for use on dark backgrounds.
<span class="joy-badge joy-badge--inverse">Badge</span>
<span class="joy-badge joy-badge--outline joy-badge--inverse">Badge</span>If you need a custom badge, you can use the badge-color Sass mixin for creating a badge in a color that is not available by default.
The source for the mixin looks like this:
@mixin badge-color(
$mx-bkgd : $color-badge-bkgd, // Badge Background color
$mx-color : $color-badge-text, // Badge Text Color
$mx-outline : false // Set to true if you want an outline button
) {
background-color: $mx-bkgd;
color: $mx-color;
@if $mx-outline {
box-shadow: inset 0 0 0 1px $mx-color;
}
};To use it, simply create a class in your project's Sass files (assuming you have imported Joystick).
.custom-badge {
@include badge-color($berry-lightest, $berry-darker);
}
.custom-badge-outline {
@include badge-color(transparent, $berry, true);
}And then just apply your custom class to the base .joy-badge class.
<span class="joy-badge custom-badge">Badge</span>
<span class="joy-badge custom-badge-outline">Badge</span>