Badge

Show unread counts and status with compact numbers, text, or dots alongside buttons, avatars, and navigation items.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Badge for a short status or count. Use Button when the user must trigger an action, and choose Chip or Tag for an interactive label inside an input.

children takes priority over count. Explicit dot mode shows only a dot and no content.
Counts cap at 99 by default and zero is hidden by default; use max and showZero to change this. Use as="badge" for a badge on Avatar or Icon.

Import

import { Badge } from '@snowui-design-system/components';

Usage

Dot badges

Sizes

Colors

Variants

API Reference

Property	Type	Default	Example	Description
`variant`	`"filled" \| "border"`	`"filled"`	`variant="filled"`	Appearance variant. border matches the default border appearance of Kbd: transparent background, inset outline, inherited text color, 0×4px padding, and 6px corners.
`count`	`number \| string`	`—`	`count="Example"`	Badge number or text. Numbers above max render as max+; ordinary strings remain unchanged. Zero and the string "0" are hidden unless showZero is set. A matching stateCount overrides this value.
`stateCount`	`StateValueMap<number \| string>`	`—`	`stateCount={stateCountOptions}`	Map the nearest parent Frame state to a count for declarative Badge visibility.
`dot`	`boolean`	`—`	`dot`	true forces dot mode; false uses content mode. When omitted, dot mode is automatic only when the resolved count is undefined and there are no children.
`max`	`number`	`99`	`max={42}`	Maximum displayed number in numeric mode; larger values render as max+.
`showZero`	`boolean`	`false`	`showZero`	false hides numeric zero, the string "0", and empty non-dot badges; true keeps them. Dot and loading visibility are unaffected.
`color`	`SnowUIColor \| string`	`"Brand"`	`color="Example"`	Fill color for filled and dot modes. Accepts PascalCase semantic colors or CSS color values. filled keeps white text; border content mode remains transparent with inherited text color.
`size`	`ResourceSize`	`—`	`size={value}`	Supports 12, 16, 20, 24, 28, 32, 40, 48, and 80. When omitted, reads parent size context. Border content mode hugs the text; Avatar and Icon badge sizes follow the host badge protocol.
`children`	`Snippet`	`—`	`<Badge>Content</Badge>`	Custom Badge content, shown before count. Children select content mode when dot is omitted; dot=true suppresses this content.