Badge - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-badge> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
config
(optional)		string

The main parameter has three components following the pattern: <type><?:style><?:size>.

  • type: Establishes the type of content that the badge is going to be showing. The possible values are: dot , icon, text.
  • style: (optional) establishes the style of badge is going. The possible value is outline.
  • size: (optional) defines de size of the badge. The default value is m, being omitted from the param. The possible values are: xs, s, or l. Check the sizes section.
text
(if config is "text")		string

Value inside the badge. Needs to be used if the type of the badge is text.

icon
(if config is "icon")		string

Sets icon of the badge. Needs to be used if the type of the badge is icon.

This icon needs to be always the outline styled version to avoid visual artifacts.

content
(optional)		stringThe content of the badge.
fill
(optional)		string

Changes the color of the badge. Check the colors section.

config ​

type ​

For the z-badge component, the type parameter establishes the type of content that the badge is going to be showing. The possibles variants are: dot, icon, text.

  • The z-badge component will use the dot configuration as default, matching the dot variant of the specifications.
Badged content
  • The textvariant will use config="text" and will receive the text to be shown in another attribute called text. If not text is provided, the badge will look like the dot base variant.
Badged content
  • The iconvariant will use config="icon" and will receive the icon to be shown in another attribute called icon. Make sure that you use the line version of the icons for the Badge. Otherwise, the icon won't be shown to avoid misusage of the component.
Badged content
style ​

The first modifier is style, that can receive the value outline 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. The type can be skipped if the value is dot.

Badged contentBadged content

The color can also be customized using the --z-badge--border-color CSS property.

Badged content
size ​

The second modifier is size, which can have the values xs, s, m (default), or l. Must be always at the end and the z-badge attribute. The type can be skipped if the value is dot.

Badged contentBadged 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 contentBadged contentBadged 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.4.4/@zurich//web-components/styles.css" />
<script type="module" src="/0.4.4/@zurich/web-components/badge.js"></script>
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. -->
<z-badge config="text" text="+99"><span>Content</span></z-badge>
<z-badge config="icon" icon="arrow-long-left:line"><span>Content</span></z-badge>
<z-badge config="dot"><span>Content</span></z-badge>

<!-- Outline version -->
<z-badge config="text:outline" text="+99"><span>Content</span></z-badge>
<z-badge config="icon:outline" icon="arrow-long-left:line"><span>Content</span></z-badge>
<z-badge config="dot:outline"><span>Content</span></z-badge>