# antuikit / Badge

> Badge with `emphasis`, `shape`, `elevated`, `pulse`, theme palette colors and a raised count.

Docs: https://antuikit.com/docs/components/badge

## Install

npx antuikit@latest init
npx antuikit@latest add badge

## Import

import { Badge } from "@/components/ui/badge";

## Demos

- [Basic](https://ui.antuikit.com/embed/badge/basic.md): Set `count` for a number, `dot` for a plain dot, or `showZero` to keep a 0, and pass the badge to an avatar's `indicator` to put it on its corner.
- [Size](https://ui.antuikit.com/embed/badge/size.md): Set `size="small"` for a smaller count that suits dense rows, on an avatar or on its own.
- [Shape](https://ui.antuikit.com/embed/badge/shape.md): Set `shape` to `"square"` or `"squircle"` to change the count's corners from the default circle or pill.
- [Elevated](https://ui.antuikit.com/embed/badge/elevated.md): Set `elevated={false}` to drop the ring and shadow around the count, so it sits flat on what it overlaps.
- [Offset](https://ui.antuikit.com/embed/badge/offset.md): Set `offset` to an `[x, y]` pair to move the count away from the corner, outward or inward.
- [Custom count](https://ui.antuikit.com/embed/badge/custom-count.md): Pass `count` a node or a short string instead of a number, like a status icon or `"NEW"`.
- [Count tooltip](https://ui.antuikit.com/embed/badge/count-title.md): Set `title` to replace the count's hover tooltip with a sentence, like 17 unread messages.
- [Status](https://ui.antuikit.com/embed/badge/status.md): Set `status` and `text` for a colored dot with a label, like Deployed or Down, and `processing` pulses.
- [Processing colors](https://ui.antuikit.com/embed/badge/processing-colors.md): Add `color` to `status="processing"` to recolor the dot and its pulsing ring, with a color name like `green` or `rose`.
- [Pulse](https://ui.antuikit.com/embed/badge/pulse.md): Set `pulse` to `"fade"` to dim the dot and bring it back instead of sending out a ring, or to `false` to keep it still.
- [Fade on any dot](https://ui.antuikit.com/embed/badge/fade-colors.md): `pulse="fade"` works on every status and `color`, from the gray `default` dot to a red Recording or a violet Generating one.
- [Preset colors](https://ui.antuikit.com/embed/badge/preset-colors.md): Set `color` to a preset like `cyan` or `magenta` to recolor a dot with a label, a count, or a count on an avatar.
- [Theme palettes](https://ui.antuikit.com/embed/badge/theme-palettes.md): `color` also takes the palettes your theme declares, like `emerald` and `violet`, or the gray `slate`.
- [Emphasis](https://ui.antuikit.com/embed/badge/emphasis.md): Set `emphasis="strong"` to color the label in its dot's color, a shade darker so it stays readable, so the state also reads from the text.
- [Standalone](https://ui.antuikit.com/embed/badge/standalone.md): A `Badge` with no children shows its count inline, for a number beside a label or in a list row.
- [Dynamic](https://ui.antuikit.com/embed/badge/dynamic.md): Change `count` or `dot` at runtime and the badge animates, with the number scrolling to its new value.
- [Clickable](https://ui.antuikit.com/embed/badge/clickable.md): Wrap a link or a button in `Badge` and the whole control stays clickable, with the count on its corner.
- [Ribbon](https://ui.antuikit.com/embed/badge/ribbon.md): `Ribbon` hangs a label over a card's corner, like a Beta flag, and `emphasis="subtle"` gives it a lighter tint.
- [classNames and styles](https://ui.antuikit.com/embed/badge/semantic-dom.md): Pass `classNames` an object or a function to style the `root` or `indicator`, like a count that turns amber past 20.
- [Notification bell](https://ui.antuikit.com/embed/badge/notification-bell.md): A header bell with an unread count that goes down as you mark notifications read, and disappears at zero.
- [Service health](https://ui.antuikit.com/embed/badge/service-health.md): A service health card where each row ends in a status dot with a colored label, from Operational to Outage.
- [Team presence](https://ui.antuikit.com/embed/badge/team-presence.md): A team list with a status dot on each avatar for online, away and offline, next to the name.
- [Counts in tabs](https://ui.antuikit.com/embed/badge/inbox-tabs.md): Small counts inside tab labels, where a tab with a count of 0 shows no badge at all.
- [Sidebar counts](https://ui.antuikit.com/embed/badge/sidebar-nav.md): A sidebar where each item ends in a small count, red on the active item and gray on the rest.
- [Pricing ribbon](https://ui.antuikit.com/embed/badge/pricing-ribbon.md): A pricing card with a Best seller ribbon over its corner, above the plan's features and an upgrade button.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/badge`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Badge` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.