Badge is installed into your project as a file you own. It takes the same props as Ant Design v6's Badge and adds emphasis, shape, elevated and pulse, marked antuikit in the API table below.
It also lets color take a palette from your theme, like emerald or the gray slate, as well as antd's presets, and gives the count a raised shadow and tighter padding when it is small with several digits. Your classNames.indicator merges with those classes.
The corner banner is a separate component: import Ribbon from @/components/ui/ribbon instead of using Badge.Ribbon.
Install
npx antuikit@latest init
npx antuikit@latest add badge
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/badge, never from antd. The file lives in your project, so the import is a path, not a package.
import { Badge } from "@/components/ui/badge"
The axes
Badge has two enumerated props, both the kit's, and they act on different parts.
emphasis: "default" | "strong". strong colors a status label in its status text color. status and color pick the color, emphasis decides whether the label gets it. It does nothing on a count, and status="default" keeps its normal label color.
shape: "default" | "square" | "squircle". The count's corners: default is a circle or pill, square has small rounded corners, and squircle needs Chromium 139 or later. Dots stay round.
elevated: boolean, true by default. Draws a ring and a soft shadow around the count or dot. false removes both, so the indicator sits flat on what it overlaps.
pulse: "ring" | "fade" | false. Animates a dot. ring sends a ring out from it and is the default for status="processing". fade dims the dot and brings it back, on any status or color. A count never animates, and both stop under reduced motion.
// A count has no label, so emphasis does nothing here.
<Badge count={5} emphasis="strong" />
<Badge count={5} shape="square" />
<Badge count={5} shape="squircle" />
A preset label is a shade darker than its dot, so it meets WCAG AA as text. A custom color is used as is. The status colors are not darkened, so they match the rest of the page, and success and warning miss AA as text: keep the dot beside the word.
There is no subtle level. For a quieter badge, change Badge's tokens in your theme.
Flags
Two booleans, both about the number.
dot shows a plain dot. It wins over count, and the number is not shown or announced, so do not set both.
showZero keeps a zero visible. A zero hides the badge by default, which suits navigation but not a fixed table row.
A zero count also hides a dot set beside it. A bare dot with no count always shows.
<Badge dot /> {/* a mark, always drawn */}
<Badge dot count={0} /> {/* nothing: the zero hides it */}
<Badge count={0} showZero /> {/* the zero, drawn */}
<Badge count={128} overflowCount={99} /> {/* 99+, title still says 128 */}
Slots
The props that take your own content.
count takes any node, so an icon or a short word works. A word like NEW may need less inline padding, set through classNames.
text is the label beside a status dot, and the only text a status badge has.
children decide the form. With children, the count sits on their corner. Without them it renders inline, and offset does nothing.
Badge adds no interactivity. Wrap a Button to hang the count on it and keep its focus ring, disabled state and name. Wrapping the Badge in a link makes both one larger target instead.
// Wrapping: the count is positioned against the button.
classNames and styles take the same two keys, one per part, as an object or a function of the props. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Badge
2
classNames={{
3
root: "…",
4
indicator: "…",
5
}}
6
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Badge
Badge's props. Rows marked antuikit in the Version column are added by the kit.
Ribbon
Ribbon's props. Rows marked antuikit in the Version column are added by the kit.