Label

Use tags to label, categorize, or organize items using keywords that describe them.

Multiple or single tags can be used to categorize items.

Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

Default text style: Uppercase

Border radius: Interactive

Default

Default

Colours

Xsmall
Xsmall
Xsmall

Sizes

Twoxsmall (2xs)
Xsmall (xs)
Twoxsmall (2xs)
Xsmall (xs)

Label with icons

Twoxsmall
Twoxsmall
Twoxsmall
Xsmall
Xsmall
Xsmall

Letter cases

Default
Lowercase

Label props

NameTypeRequiredDefaultDescription
bgColorstringNobg-bulmaBackground colour
colorstringNotext-gohanText colour
iconLeftReact.ReactElementNo-Left icon
iconRightReact.ReactElementNo-Right icon
isUppercasebooleanNotrueLetter case
size2xs | xsNoxsSize of label