Badge
Displays a badge
<span is-="badge">Badge</span> Theme
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><span is-="badge" variant-="background0">background0</span>
<span is-="badge" variant-="background1">background1</span>
<span is-="badge" variant-="background2">background2</span>
<span is-="badge" variant-="background3">background3</span>
<span is-="badge" variant-="foreground0">foreground0</span>
<span is-="badge" variant-="foreground1">foreground1</span>
<span is-="badge" variant-="foreground2">foreground2</span> Theme
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><span is-="badge" cap-="square">square</span>
<span is-="badge" cap-="round">round</span>
<span is-="badge" cap-="triangle">triangle</span>
<span is-="badge" cap-="ribbon">ribbon</span>
<span is-="badge" cap-="slant-top">slant-top</span>
<span is-="badge" cap-="slant-bottom">slant-bottom</span> Theme
Pass two values separated by a space to customize the start and end cap styles
<span is-="badge" cap-="square round">square round</span>
<span is-="badge" cap-="round ribbon">round ribbon</span>
<span is-="badge" cap-="ribbon triangle">ribbon triangle</span>
<span is-="badge" cap-="triangle slant-top">triangle slant-top</span>
<span is-="badge" cap-="slant-top slant-bottom">slant-top slant-bottom</span>
<span is-="badge" cap-="slant-bottom square">slant-bottom square</span> Theme
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
<span is-="badge" cap-="slant-top">badge</span>span[is-="badge"] {
--badge-color: var(--foreground0);
--badge-text: var(--background0);
background-color: grey;
} Theme
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"] { /* ... */ }