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

  <Label color="gohan" background_color="piccolo">
    Active
  </Label>
  <Label color="krillin" background_color="trunks">
    Active
  </Label>
  <Label color="bulma" background_color="dodoria">
    Active
  </Label>

Sizes

xsmall (default) twoxsmall

  <Label size="xsmall">
    xsmall (default)
  </Label>
  <Label size="twoxsmall">
    twoxsmall
  </Label>

Label with Icons

Left Icon Right Icon Both Icons

  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Label size="twoxsmall">
      <:left_icon><ControlsClose class="h-3 w-3" /></:left_icon>
      Left Icon
    </Label>
    <Label size="twoxsmall">
      Right Icon
      <:right_icon><ControlsClose class="h-3 w-3" /></:right_icon>
    </Label>
    <Label size="twoxsmall">
      Both Icons
      <:left_icon><ControlsClose class="h-3 w-3" /></:left_icon>
      <:right_icon><ControlsClose class="h-3 w-3" /></:right_icon>
    </Label>
  </div>
  <div class="flex flex-wrap items-center justify-around gap-2 w-full">
    <Label>
      <:left_icon><GenericInfo class="h-6 w-6" /></:left_icon>
      Left Icon
    </Label>
    <Label>
      Right Icon
      <:right_icon><GenericInfo class="h-6 w-6" /></:right_icon>
    </Label>
    <Label>
      Both Icons
      <:left_icon><GenericInfo class="h-6 w-6" /></:left_icon>
      <:right_icon><GenericInfo class="h-6 w-6" /></:right_icon>
    </Label>
  </div>

Letter cases

Uppercase (default) Lowercase

  <Label>
    Uppercase (default)
  </Label>
  <Label is_uppercase={false}>
    Lowercase
  </Label>

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

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select

Label

Colours

Sizes

Label with Icons

Letter cases