Badge

View Storybook

A badge is a compact UI element that provides brief, descriptive information about an element. It is terse, ideally one word.

Classes

Class Applies to Description
.d-badge N/A Base badge style
.d-badge--black-700 .d-badge Styles badge with black-700.
.d-badge--green-400 .d-badge Styles badge with green-400.
.d-badge--orange-400 .d-badge Styles badge with orange-400.
.d-badge--pink-300 .d-badge Styles badge with pink-300.
.d-badge--pink-500 .d-badge Styles badge with pink-500.
.d-badge--pink-600 .d-badge Styles badge with pink-600.
.d-badge--pink-700 .d-badge Styles badge with pink-700.
.d-badge--purple-100 .d-badge Styles badge with purple-100.
.d-badge--purple-300 .d-badge Styles badge with purple-300.
.d-badge--purple-500 .d-badge Styles badge with purple-500.
.d-badge--purple-700 .d-badge Styles badge with purple-700.
.d-badge--red-500 .d-badge Styles badge with red-500.
.d-badge--white .d-badge Styles badge with white.
.d-badge--yellow-300 .d-badge Styles badge with yellow-300.

Examples