Nonagons Please Me

    @fylgja/badge

    1.1.0 • Public • Published

    Fylgja - Badge

    NPM version license

    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 ($enable-badge-layer: true);
    // Or via PostCSS import
    @import "@fylgja/badge/layer";

    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;
    $enable-badge-layer: false !default;
    
    $badge-layer-name: components !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;

    Install

    npm i @fylgja/badge

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    86

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    7.36 kB

    Total Files

    9

    Last publish

    Collaborators

    • allrude
    • grimlink