Badge

Storybook

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

Usage

import { Badge } from 'rsuite';

Examples

Basic

With content

99+
NEW

Invisible


Independent Use

99+
NEW

Colorful indicator

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

Red
Orange
Yellow
Green
Cyan
Blue
Violet

99+
NEW

Props

<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)

ts:Color

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