Badge
Display an indicator that requires attention.
1
5
50
150
New
Code Editor
<Container left><Container center><Badge>1</Badge></Container><Container center><div><Badge>5</Badge></div></Container><Container center><div><Badge>50</Badge></div></Container><Container center><div><Badge>150</Badge></div></Container><Container center><div><Badge uppercase>New</Badge></div></Container></Container>
1
5
50
100
500
1
5
50
100
500
Code Editor
<Container left><Container><Badge type="success">1</Badge></Container><Container><div><Badge type="error">5</Badge></div></Container><Container><div><Badge type="warning">50</Badge></div></Container><Container><div><Badge type="violet">100</Badge></div></Container><Container><div><Badge type="secondary">500</Badge></div></Container><Container><div><Badge type="success" variant="contrast">1</Badge></div></Container><Container><div><Badge type="error" variant="contrast">5</Badge></div></Container><Container><div><Badge type="warning" variant="contrast">50</Badge></div></Container><Container><div><Badge type="violet" variant="contrast">100</Badge></div></Container><Container><div><Badge type="secondary" variant="contrast">500</Badge></div></Container></Container>
Small
Normal
Large
Code Editor
<Container left><Container><div><Badge size="small">Small</Badge></div></Container><Container><Badge>Normal</Badge></Container><Container><div><Badge size="large">Large</Badge></div></Container></Container>
Outline
Uppercase
Code Editor
<Container left><Container><div><Badge outline>Outline</Badge></div></Container><Container><div><Badge uppercase>Uppercase</Badge></div></Container></Container>