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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| bgColor | string | No | bg-bulma | Background colour |
| color | string | No | text-gohan | Text colour |
| iconLeft | React.ReactElement | No | - | Left icon |
| iconRight | React.ReactElement | No | - | Right icon |
| isUppercase | boolean | No | true | Letter case |
| size | 2xs | xs | No | xs | Size of label |