Documentation
Components
Badge

Badge

Display an indicator that requires attention.

Default

1
5
50
150
New
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
<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
<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
AvatarButton