Badge | MDK

Badge component - Display badge with number or dot

import { Badge } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`children`	Optional	`React.ReactNode`	—	Badge content (wraps children with badge)
`count`	Optional	`number \| undefined`	—	Number to display in badge If > overflowCount, will show "overflowCount+"
`overflowCount`	Optional	`number \| undefined`	`99`	Maximum count to display
`showZero`	Optional	`boolean \| undefined`	`false`	Whether to show badge when count is 0
`dot`	Optional	`boolean \| undefined`	`false`	Show badge as a dot
`text`	Optional	`string \| undefined`	—	Custom badge content (overrides count)
`color`	Optional	`ColorVariant \| undefined`	`'primary'`	Color variant
`size`	Optional	`ComponentSize \| undefined`	`'md'`	Badge size
`offset`	Optional	`[number, number] \| undefined`	`[0, 0]`	Offset position [x, y] in pixels
`square`	Optional	`boolean \| undefined`	`false`	Square badge (no border-radius)
`className`	Optional	`string \| undefined`	—	Custom className for badge
`wrapperClassName`	Optional	`string \| undefined`	—	Custom className for wrapper
`title`	Optional	`string \| undefined`	—	Badge title for accessibility
`status`	Optional	`"success" \| "warning" \| "error" \| "default" \| "processing" \| undefined`	—	Status badge (small dot badge with text)

Usage

Small status indicator displayed standalone or overlaid on another element. Renders as a number, dot, custom text, or status pill.

Notes

When used without children, renders standalone.
dot and status ignore count / text for the visual but keep text as the label when status is set.

Example

/** * Runnable example for Badge. */import { Badge, Button } from '@tetherto/mdk-react-devkit'export const BadgeExample = () => (  <div className="mdk-example-row">    <Badge count={5}>      <Button>Messages</Button>    </Badge>    <Badge count={120} overflowCount={99}>      <Button>Notifications</Button>    </Badge>    <Badge dot>      <Button>Updates</Button>    </Badge>    <Badge status="success" text="Online" />    <Badge status="error" text="Offline" />    <Badge text="NEW" color="primary" square />  </div>)