Badge - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses any container tag, but we recommend the use of <div>
or <span>
HTML tags with the z-badge
HTML custom attribute and the content to have the Badge
placed inside the tag.
z-badge
The z-badge
parameter will use the dot
configuration as default, matching the dot variant of the specifications.
Badged content
For the other two types, text and icon, we can specify the type as the first param of the z-badge
attribute.
The text variant will use
z-badge="text"
and will receive the text to be shown in another attribute calledtext
. If nottext
is provided, the badge will look like the dot base variant.Badged contentThe icon variant will use
z-badge="icon"
and will receive the icon to be shown in another attribute calledicon
. Make sure that you use theline
version of the icons for the Badge. Otherwise, the icon won't be shown to avoid misusage of the component.Badged content
The z-badge
attribute has two optional modifiers that can de applied in order after the type, using colon (:
) as the separator. The pattern would be <?type><?style><?size>
The first modifier is
style
, that can receive the valueoutline
to make the badge separate from the content by a line that matches the background. This uses the--z-bg
variable, so it's important that this is changed within the context. Thetype
can be skipped if the value isdot
.Badged contentBadged contentThe color can also be customized using the
--z-badge--border-color
CSS property.Badged contentThe second modifier is
size
, which can have the valuesxs
,s
,m
(default), orl
. Must be always at the end and thez-badge
attribute. Thetype
can be skipped if the value isdot
.Badged contentBadged contentBadged contentBadged content
fill
The attribute fill
changes the color of the badge background. The value names available are defined using the color palettes (check the colors section), and the possible values are: zurich-blue
, dark-blue
, sky-blue
, moss
, peach
, lemon
, or grey-9
. The color of the text adapts for contrast.
Badged content
Badged content
Badged content
The color can also be customized using the --z-badge--bg
CSS property. To ensure contrast, use the --z-badge--color
CSS property to adjust the text color.
Badged content
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Badge.css" />
Code
html
<!-- For the example it's used the Medium size, make sure you try different sizes.
To change the color of the badge make sure to use the fill attribute with any of the possible values. -->
<div z-badge="text" text="+99"><span>Content</span></div>
<div z-badge="icon" icon="arrow-long-left:line" ><span>Content</span></div>
<div z-badge="dot"><span>Content</span></div>
<!-- Outline version -->
<div z-badge="text:outline" text="+99"><span>Content</span></div>
<div z-badge="icon:outline" icon="arrow-long-left:line" ><span>Content</span></div>
<div z-badge="dot:outline"><span>Content</span></div>