Badge

Badge supports every built-in variant except tertiary: primary, secondary, success, info, danger, and outline.

import { Badge } from '@manti-ui/react';

const variants = ['primary', 'secondary', 'danger', 'outline'] as const;

export default function BadgeVariants() {
  return (
    <>
      {variants.map((variant) => (
        <Badge key={variant} variant={variant}>
          {variant}
        </Badge>
      ))}
    </>
  );
}

Dot

Set dot to add a leading status marker.

OnlineAwayOffline

Sizes

SmallMedium

API

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'danger' \| 'outline'`	`'secondary'`	Color treatment. Badge supports every built-in variant except tertiary.
`size`	`'sm' \| 'md'`	`'sm'`	Chip size.
`dot`	`boolean`	`false`	Show a leading status dot.
`as`	`ElementType`	`'span'`	Polymorphic root, for example an anchor when the badge navigates.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="badge"][data-part="root"]`	The chip element.
`dot`	`[data-scope="badge"][data-part="dot"]`	Leading status indicator (when dot).

Tokens

Token	Controls
`--manti-badge-radius`	radius
`--manti-badge-font-size`	font size
`--manti-badge-padding-y`	padding y
`--manti-badge-padding-x`	padding x
`--manti-badge-gap`	gap
`--manti-badge-dot-size`	dot size

Last updated 13 September 2026