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:
|
text (if config is "text") | string | Value inside the badge. Needs to be used if the type of the badge is |
icon (if config is "icon") | string | Sets icon of the badge. Needs to be used if the type of the badge is This icon needs to be always the |
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
html
<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
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: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>