Badge

Displays a badge or a component that looks like a badge.

01.Default

Code Dialog

Default

02.Secondary

Code Dialog

Secondary

03.Outline

Code Dialog

Outline

04.Destructive

Code Dialog

Destructive

05.Shapes

Code Dialog

RectangularRoundedDefault

06.Gradient

Code Dialog

Gradient

07.Gradient Outline

Code Dialog

Gradient Outline

08.Soft

Code Dialog

In Progress

Blocked

Done

09.Status

Code Dialog

In Progress

Blocked

Done

10.With image

Code Dialog

shadcnshadcn

11.With icon

Code Dialog

LeftRightRemove

12.Clickable

Code Dialog

Clickable

13.Clickable link

Code Dialog

shadcn

14.With number

Code Dialog

Projects 6Members 11Tasks 7

15.Plan features with badge

Code Dialog

• Unlimited Projects
• Custom Integrations New
• Advanced Analytics Experimental
• Priority Support
• Team Collaboration

16.Tabs with badge

Code Dialog

ProfileProjects10Messages5Settings

17.Icon button

Code Dialog

2@@