logo logo
logo logo
Components

Badges

Documentation and examples for badges, our small count and labeling component.

Example with Variations

We created predefined badges styles with states appearance.

Default Style
Primary Success Warning Danger Info Dark Gray Light
Pill Style
Primary Success Warning Danger Info Dark Gray Light
Outline Style
Primary Success Warning Danger Info Dark Gray Light
Outline Pill Style
Primary Success Warning Danger Info Dark Gray Light
Dot Style

Here is a diffrent appearance for badges with dot.

Primary Success Warning Danger Info Dark Gray Light
Example with Pale color

Here is badges with pale colors varients.

Default Style
Primary Success Warning Danger Info Dark Gray Light
Pill Style
Primary Success Warning Danger Info Dark Gray Light
Outline Style
Primary Success Warning Danger Info Dark Gray Light
Outline Pill Style
Primary Success Warning Danger Info Dark Gray Light
Example with Sizes

You can make badge small or as big as you need.

Default Style
Primary Primary Primary Primary Primary
Pill Style
Primary Primary Primary Primary Primary
© 2024 DashWind. Template by Softnio