Badges

Examples and documentation for the badges component

Variant: Default

Default
Primary
Success
Warning
Danger
Secondary

Variant: Outline

Default
Primary
Success
Warning
Danger
Secondary

Variant: Filled

Default
Primary
Success
Warning
Danger
Secondary

Variant: Solid

Default
Primary
Success
Warning
Danger
Secondary

Variant: Soft

Default
Primary
Success
Warning
Danger
Secondary

Badges with Icons

Active
Pending
Error
Admin

Size Variants

Extra Extra Small
Extra Small
Small
Medium
Large
Extra Large
Extra Extra Large

Pill Shape

Pill Primary
Pill Success
Pill Warning
Pill Danger