Badge

<zeno-badge>Data displaySource

A count or status dot, shown on its own or on the corner of the slotted element.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Variants

Primary Secondary Success Warning Danger Info Neutral

<zeno-badge variant="primary">Primary</zeno-badge>
<zeno-badge variant="secondary">Secondary</zeno-badge>
<zeno-badge variant="success">Success</zeno-badge>
<zeno-badge variant="warning">Warning</zeno-badge>
<zeno-badge variant="danger">Danger</zeno-badge>
<zeno-badge variant="info">Info</zeno-badge>
<zeno-badge variant="neutral">Neutral</zeno-badge>

Outline and subtle

Active Pending Failed Active Pending Failed

<zeno-badge outline variant="success">Active</zeno-badge>
<zeno-badge outline variant="warning">Pending</zeno-badge>
<zeno-badge outline variant="danger">Failed</zeno-badge>
<zeno-badge subtle variant="success">Active</zeno-badge>
<zeno-badge subtle variant="warning">Pending</zeno-badge>
<zeno-badge subtle variant="danger">Failed</zeno-badge>

Sizes and shapes

Extra small Small Medium Large Pill Rounded Square

<zeno-badge size="xs">Extra small</zeno-badge>
<zeno-badge size="sm">Small</zeno-badge>
<zeno-badge size="md">Medium</zeno-badge>
<zeno-badge size="lg">Large</zeno-badge>
<zeno-badge shape="pill">Pill</zeno-badge>
<zeno-badge shape="rounded">Rounded</zeno-badge>
<zeno-badge shape="square">Square</zeno-badge>

Counts

A number in value is cut at max, which is 99 unless you change it.

<zeno-badge variant="danger" value="5"></zeno-badge>
<zeno-badge variant="danger" value="120"></zeno-badge>
<zeno-badge variant="danger" value="120" max="999"></zeno-badge>

Dot

A dot has no text. pulse adds a repeating animation to draw attention.

<zeno-badge dot variant="success"></zeno-badge>
<zeno-badge dot variant="warning"></zeno-badge>
<zeno-badge dot variant="danger" pulse></zeno-badge>

Attributes and properties

Property	Attribute	Type	Default	Description
variant	variantreflects	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'	'primary'
size	sizereflects	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	shapereflects	'pill' | 'rounded' | 'square'	'pill'
outline	outlinereflects	boolean	false
subtle	subtlereflects	boolean	false
dot	dotreflects	boolean	false
pulse	pulsereflects	boolean	false
max	max	number	99
value	value	string | number	–
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	The element the badge sits on.

CSS parts

Part
base

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• A badge with text or a count is a plain <span>. It has no role, and its text is read where it stands in the page.
• A dot badge has role="status". Its name is the aria-label you set, or the variant name followed by “status indicator”.
• The variant colour is not announced. Put the meaning in the text, or in aria-label for a dot.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has a Storybook story.

10 of the 14 properties, methods, events, slots and parts above have no description in the source

• the property variant
• the property size
• the property shape
• the property outline
• the property subtle
• the property dot
• the property pulse
• the property max
• the property value
• the part base

Known gaps:

• The source comment says the badge can sit on the corner of a slotted element. It cannot. The slot is the badge’s own content, and there are no styles that place a badge on another element.
• The size type allows xl, but there are no styles for it. An xl badge looks like md.
• Every dot is a status live region, also when it only decorates. The fallback name, for example “danger status indicator”, is English and is built from the variant name.
• primary and accent look the same.
• A count is announced as a bare number, such as “5”. The element has no way to add hidden text that says what is counted.