Badge components
Badge is a compact label that appears beside a primary interface area which is used to represent status or metadata for that area.
63components272storiesLast updated last month
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa9ab/thumb/capture-434447cf.png)
ColoredBadge
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a073537/w_680/capture.png)
Badge
![](https://snapshots.chromatic.com/snapshots/5d559397bae39100201eedc1-6696b8f4829481f1385f2eb9/thumb/capture-cb758271.png)
Badge
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a07361b/w_680/capture.png)
NotificationBadge
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa9a0/thumb/capture-76511c25.png)
Badge
![](https://snapshots.chromatic.com/snapshots/6393777def56f7d1cffc8f2c-639377e9e889d2c7d522547a/w_680/capture.png)
Badge
Badge is a compact label that appears beside a primary interface area which is used to represent status or metadata for that area.