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 called text. If not text is provided, the badge will look like the dot base variant.

    Badged content

  • The icon variant will use z-badge="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

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 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 content
    Badged content

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

    Badged content

  • 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 content
    Badged content
    Badged content
    Badged 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.1/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@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>