Light Dark System
Compact Comfortable

Badge

<zn-badge> | ZnBadge
Since 1.0 experimental

Badges label the status or category of a record, such as “Active” or “Past due”.

Neutral Active Past due Cancelled Trial AI suggested Completed Failed VIP Urgent Large 
<zn-badge>Neutral</zn-badge>
<zn-badge type="success">Active</zn-badge>
<zn-badge type="warning">Past due</zn-badge>
<zn-badge type="danger">Cancelled</zn-badge>
<zn-badge type="info">Trial</zn-badge>
<zn-badge type="ai">AI suggested</zn-badge>
<zn-badge type="success" dot>Completed</zn-badge>
<zn-badge type="danger" dot>Failed</zn-badge>
<zn-badge type="info" solid>VIP</zn-badge>
<zn-badge type="danger" solid>Urgent</zn-badge>
<zn-badge type="success" size="large" dot>Large</zn-badge>

Examples

Types

Use the type attribute to set the badge’s colour: neutral (default), success, warning, danger, info or ai. Reserve ai for AI-generated content — it is the only type that carries an icon.

Neutral Active Past due Cancelled Trial AI suggested 
<zn-badge>Neutral</zn-badge>
<zn-badge type="success">Active</zn-badge>
<zn-badge type="warning">Past due</zn-badge>
<zn-badge type="danger">Cancelled</zn-badge>
<zn-badge type="info">Trial</zn-badge>
<zn-badge type="ai">AI suggested</zn-badge>

Status Dot

Use dot to lead the label with a status indicator in the type colour.

Completed Pending Failed Draft 
<zn-badge type="success" dot>Completed</zn-badge>
<zn-badge type="warning" dot>Pending</zn-badge>
<zn-badge type="danger" dot>Failed</zn-badge>
<zn-badge dot>Draft</zn-badge>

Solid

Use solid to fill the badge with its type colour for labels that need to stand out, such as VIP or urgent.

VIP Urgent Paid Overdue 
<zn-badge type="info" solid>VIP</zn-badge>
<zn-badge type="danger" solid>Urgent</zn-badge>
<zn-badge type="success" solid>Paid</zn-badge>
<zn-badge type="warning" solid>Overdue</zn-badge>

Large

Use size="large" for a larger badge.

Large AI suggested Urgent 
<zn-badge type="success" size="large" dot>Large</zn-badge>
<zn-badge type="ai" size="large">AI suggested</zn-badge>
<zn-badge type="danger" size="large" solid>Urgent</zn-badge>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/badge/badge.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/badge/badge.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/badge/badge.js';

Slots

Name Description
(default) The badge’s label.

Learn more about using slots.

Properties

Name Description Reflects Type Default
type ai marks AI-generated content only. 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'ai' 'neutral'
solid Fills the badge with its type colour. boolean false
dot Leads the label with a dot in the type colour. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-icon>