Badge
Table of Contents
The badges component serves as a small blocks to indicate notifications, or to highlight an item.
Installation
npm install @fylgja/badge
Then include the component in to your code via;
@use "@fylgja/badge";
// Or via PostCSS import
@import "@fylgja/badge";
@layer
support
If you need support for @layer
, use the following import;
@use "@fylgja/badge" with ($badge-layer: "components");
// Or via PostCSS and other options as native CSS
@import "@fylgja/badge" layer(components);
How to use
To use the badge, create element with the class .badge
.
<span class="badge">..</span>
But if you need a badge with a little more complexity, like a badge with 2 sides of data or with a close button.
You can use the .badge-addon
as wrapper that binds the 2 badges to one badge.
<div class="badge-addon">
<span class="badge">New</span>
<button class="badge -theme">Close</button>
</div>
Badge group (Tag cloud)
To create Badge group (Tag cloud), you need to use custom CSS or the @fylgja/utilpack
.
To create a flex-grid with gap via margin or via the gap property (when it is better supported).
<div class="flex flex-wrap">
<span class="badge m-1">Wolfs</span>
<span class="badge m-1">Cats</span>
<span class="badge m-1">Bears</span>
...
</div>
Config
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles, here are the following SCSS variables can you modify.
$enable-badge-addon: true !default;
$enable-badge-theme: true !default;
$badge-padding: 0.125em 0.75em !default;
$badge-radius: 0.375em !default;
$badge-bg: if($root-fg == #000, #eee, #222) !default;
$badge-color: $color-text !default;
$badge-font-size: 0.75em !default;
$badge-font-weight: 500 !default;