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
Colours
Xsmall
Xsmall
Xsmall
Sizes
Twoxsmall (2xs)
Xsmall (sm)
Twoxsmall (2xs)
Xsmall (sm)
Label with icons
Twoxsmall
Twoxsmall
Twoxsmall
Xsmall
Xsmall
Xsmall
Letter cases
Default
Lowercase
Props for Label component
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| size | 2xs | xs | No | xs | Size for label |
| iconLeft | React.ReactElement | No | - | Left icon element |
| iconRight | React.ReactElement | No | - | Right text element |
| color | string | No | text-gohan | Text color (tw class) |
| backgroundColor | string | No | bg-bulma | Background color (tw class) |
| isUppercase | boolean | No | true | Letter case |