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.
64components292storiesLast updated yesterday
![](https://snapshots.chromatic.com/snapshots/5e53448165911c0022e68c74-6671e35d8f829deea52192f1/thumb/capture-9dc11308.png)
Badge
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a073537/w_680/capture.png)
Badge
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-633de0e30c99222b5a802d06/w_680/capture.png)
ColoredBadge
![](https://snapshots.chromatic.com/snapshots/5d559397bae39100201eedc1-66752422edfbe40f5c9f4fca/thumb/capture-cb758271.png)
Badge
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a07361b/w_680/capture.png)
NotificationBadge
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-633de0e30c99222b5a802cfb/w_680/capture.png)
Badge
![](https://snapshots.chromatic.com/snapshots/6393777def56f7d1cffc8f2c-639377e9e889d2c7d522547a/w_680/capture.png)
Badge