npm i @velkin/react
import { VuBadge } from "@velkin/react/badge";| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "" | Count or short text fallback. |
| max | number | 99 | Cap numeric values to `N+`; `0` disables. Default: `99`. |
| dot | boolean | false | Pure-dot mode. Default: `false`. |
| size | VuBadgeSize | "md" | Pill scale (`sm`|`md`|`lg`; shared core with button). Default: `"md"`. |
| color | VuBadgeColor | "danger" | Intent palette; defaults to `"danger"` for count/alert marks. Default: `"danger"`. |
| placement | VuBadgePlacement | "top-right" | Corner anchor. Default: `"top-right"`. |
| offset | string | "" | CSS-length nudge from the anchor corner. |
| bordered | boolean | true | Colored ring with halo cutout. Default: `true`. |
| show | boolean | true | Explicit visibility toggle. Default: `true`. |
| hideOnZero | boolean | false | Auto-hides when numeric `value` is 0 (`hideonzero` attr). Default: `false`. |
| processing | boolean | false | Outward pulse animation. Default: `false`. |
| disabled | boolean | false | Dims the badge. Default: `false`. |
| label | string | "" | Accessible name override. |
| Slot | Description |
|---|---|
| — | - Anchor content the badge overlays. |
| mark | Custom badge glyph; ignored when `dot` is true. |
| Part | Description |
|---|---|
| base | Wrapper holding anchor and badge. |
| badge | Overlaid pill or dot. |
| Name | Definition |
|---|---|
| VuBadgeColor | |
| VuBadgePlacement | |
| VuBadgeSize | |