Badge - Web Component

Browser support

Parameters

The Web component uses a <z-badge> tag.

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

Name	Type	Description
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)	string	The content of the badge.
fill (optional)	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

<link rel="stylesheet" href="/0.3.7/@zurich//web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/badge.js"></script>

Code

<!-- 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:outline"><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:outline"><span>Content</span></z-badge>
<z-badge config="dot:outline"><span>Content</span></z-badge>