Badge

Displays a badge

Import

@import "@webtui/css/components/badge.css";

Usage

<span is-="badge">badge</span>

Examples

Variants

Use the variant- attribute to change the color of a badge

<span is-="badge" variant-="foreground1">foreground1</span>
<span is-="badge" variant-="background2">background2</span>

Available variants match the base theme colors

Caps

Use the cap- attribute to customize badges’ end cap styles

<span is-="badge">square</span>
<span is-="badge" cap-="round">round</span>
<span is-="badge" cap-="triangle">triangle</span>

Pass two values separated by a space to customize the start and end cap styles

Reference

Properties

Use the following custom CSS properties to style badges

• --badge-color: The color of the badge
• --badge-text: The text color of the badge

#my-custom-badge {
  --badge-color: #ffffff;
  --badge-text: #000000;
}

Using background-color directly will color behind the badge instead of coloring the badge shape

Extending

To extend the Badge stylesheet, define a CSS rule on the components layer

@layer components {
    [is-~="badge"] {
        &[variant-="red"] {
            --badge-color: red;
            --badge-text: white;
        }

        /* ... */
    }
}

Scope

• All elements with the is-~="badge" selector

[is-~="badge"] { /* ... */ }