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

Active Active Active

Sizes

xsmall (default) twoxsmall

Label with Icons

Left Icon Right Icon Both Icons
Left Icon Right Icon Both Icons

Letter cases

Uppercase (default) Lowercase
Label props
Name Type Required Default Description
size xs | sm | md | lg | xl No md Size of Button
left_icon string No - Asset name for the left icon
right_icon string No - Asset name for the right icon
color string No gohan.100 Asset name for the icon. Icon only and no text shown
background_color string No bulma.100 Active state
is_uppercase boolean No true Letter case