Badge
Display an indicator that requires attention.
Default
1
5
50
150
New
Code Editor
Code Editor
<Container gap={5}> <Container align="flex-start"> <Badge>1</Badge> </Container> <Container align="flex-start"> <Badge>5</Badge> </Container> <Container align="flex-start"> <Badge>50</Badge> </Container> <Container align="flex-start"> <Badge>150</Badge> </Container> <Container align="flex-start"> <Badge>New</Badge> </Container> </Container>
Variants
Primary
Secondary
Info
Success
Warning
Danger
Code Editor
Code Editor
<Container gap={5}> <Container align="flex-start"> <Badge type="primary">Primary</Badge> </Container> <Container align="flex-start"> <Badge type="secondary">Secondary</Badge> </Container> <Container align="flex-start"> <Badge type="info">Info</Badge> </Container> <Container align="flex-start"> <Badge type="success">Success</Badge> </Container> <Container align="flex-start"> <Badge type="warning">Warning</Badge> </Container> <Container align="flex-start"> <Badge type="danger">Danger</Badge> </Container> </Container>
Sizes
Small
Normal
Normal
Code Editor
Code Editor
<Container gap={5}> <Container align="flex-start"> <Badge size="small">small</Badge> </Container> <Container align="flex-start"> <Badge size="normal">normal</Badge> </Container> <Container align="flex-start"> <Badge size="large">normal</Badge> </Container> </Container>
Last updated on