Badge

Browser support

...

Parameters

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.

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

Name	Type	Description
`z-badge`	`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`	`string*`	Value inside the badge. Needs to be used if the type of the badge is `text`.
`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. Attention! Make sure that you use the `outline` version of the icons for the Badge. Otherwise, the icon won't be shown to avoid misusage of the component.
`fill`	`string?`	Changes the color of the badge. Check the colors section.

TIP

Check a nice example of the component in vanilla HTML. Open the inspector or visualize the source code to fully understand how to use the component and/or play with it.

Playground

Customization

HTML Examples

Imports

html

<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@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:outline" ><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:outline" ><span>Content</span></div>
<div z-badge="dot:outline"><span>Content</span></div>

Badge ​

Browser support ​

Parameters ​

Playground ​

Customization ​