Data Display

Badge

A small dot, count, or label overlaid on the corner of another element.

Install

import { Badge } from 'vael-ui'

variant

count

max

dot

animated

import { Badge } from 'vael-ui'

<Badge variant="primary" :count="5" :max="99" :dot="false" animated>Badge</Badge>

Name	Type	Default	Description
`variant`	`"primary" \| "danger" \| "muted" \| "success" \| "warning" \| "info"`	`"primary"`
`count`	`number \| undefined`
`max`	`number \| undefined`	`99`	Counts above this render as `"${max}+"`.
`dot`	`boolean \| undefined`	`false`	Minimal size, no content — a plain presence dot.
`animated`	`boolean \| undefined`	`true`	`false` drops the built-in count-change animation — use when driving your own animation instead.
`ui`	`Partial<{ root: UiPartValue; }> \| undefined`

Name	Type	Description
`default`	`any`	Overrides `count` entirely — anything you render here wins.

No events.

Name	Type	Description
`el`	`HTMLElement \| null`