Label

Source API

The Label component is used to provide clear and concise descriptions or identifiers for tags or status indicators. It enhances usability and accessibility by associating text with specific UI elements. With flexible styling options, Labels can be easily customized to fit various designs and contexts. Just add the .label class to a span or div element to create a label.

Default

Primary

Success

Warning

Error

Dark

Add the .small or .large class to a label to make it smaller or larger.

Small

Default

Large

Styles	Combinators
`primary`	`.primary.label`
`success`	`.success.label`
`warning`	`.warning.label`
`error`	`.error.label`
`dark`	`.dark.label`
Sizes	Combinators
`small`	`.small.label`
`large`	`.large.label`

The Badge component is a small, attention-grabbing element used to display additional information or highlight specific content. Commonly used to indicate notifications, counts, or status labels, Badges are versatile and can be easily attached to buttons, icons, or other UI elements. With customizable styles and sizes, they seamlessly integrate into any design. Just add the .badge class to a span or div container element to create a badge.

Online

Pending

Offline

Add the .small or .large class to a badge to make it smaller or larger.

Small

Default

Large

Styles	Combinators
`primary`	`.primary.badge`
`success`	`.success.badge`
`warning`	`.warning.badge`
`error`	`.error.badge`
`dark`	`.dark.badge`
Sizes	Combinators
`small`	`.small.badge`
`large`	`.large.badge`