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

Colours

XsmallXsmallXsmall

Sizes

TwoxsmallXsmallTwoxsmallXsmall

Label with icons

TwoxsmallTwoxsmallTwoxsmall
XsmallXsmallXsmall

Letter cases

DefaultLowercase

Props for Label component

NameTypeRequiredDefaultDescription
sizetwoxsmall | xsmallNoxsmallSize for label
iconLeftReact.ReactElementNo-Left icon element
iconRightReact.ReactElementNo-Right text element
colorColorPropsNogohan.100Text color
backgroundColorColorPropsNobulma.100Background color
isUppercasebooleanNotrueLetter case