Badge

Used for buttons, numbers or status markers next to icons.

Usage

import { Badge } from 'rsuite';

//or
import Badge from 'rsuite/lib/Badge';

Examples

Default

With content

Invisible

Independent Use

Colorful indicator

color attribute sets the indicator style, options include: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'.

Props

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';

<Badge>

Property Type(Default) Description
children ReactNode Be wrapped component
classPrefix string ('badge') The prefix of the component CSS class
content ReactNode Content info
color Color A indicator can have different colors
maxCount number(99) Max count number(Only valid if content is type number)