Badge Component

Configuration Options
Theme Options


The badge component is primarily used as a presentational component to show various kinds of statuses.


Configuration Options


Expected Type: String

The text that's shown inside the badge.


  • Click: Triggers whenever the badge is clicked.
  • Double Click: Triggers whenever the badge is clicked twice in quick succession.
  • Right Click: Triggers whenever the badge is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Text Align: The badge's text alignment. (Number | Pixels)
  • Text Color: The badge's text color. (String | Hex)
  • Background Color: The badge's background color. (String | Hex)
  • Text Style: The badge's text style. (Bold | Italic | Underline)
  • Text Size: The badge's text size. (Number | Pixels)
  • Padding: The badge's padding. (Number | Pixels)
  • Shadow: The badge's shadow. (Shadow)
  • Border: The badge's border. You can also specify the radius for the edges. (Border)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →