Skip to contents

The badge() is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).

See the official documention for badge, for all the correct props.

Examples

badge(
  `color-scheme` = 6,
  icon(
    name = "pending",
    slot = "icon"
  ),
  "Pending"
)
Pending
badge(
  style = "width: 175px;",
  "This is a very long badge that is truncated."
)
This is a very long badge that is truncated.
badge(
  `color-scheme` = 2,
  icon(
    name = "pending",
    slot = "icon"
  )
)