Button Component

Configuration Options
Theme Options


The button component is used for users to trigger interactions with. This can range from navigation to executing workflows and endpoints.


Configuration Options


Expected Type: String

The text that displays inside the button.


  • Click: Triggers whenever the button is clicked.
  • Double Click: Triggers whenever the button is clicked twice in quick succession.
  • Right Click: Triggers whenever the button 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

  • Type: Button type. (Primary | Secondary | Outline | Loading | Disabled | Success)
  • Text Align: The button's text alignment. (Number | Pixels)
  • Text Color: The button's text color. (String | Hex)
  • Icon Color: The button's icon color if an icon is set. (String | Hex)
  • Text Style: The button's text style. (Bold | Italic | Underline)
  • Text Size: The button's text size. (Number | Pixels)
  • Padding: The button's padding. (Number | Pixels)
  • Shadow: The button's shadow. (Shadow)
  • Border: The button's border. You can also specify the radius for the edges. (Border)
  • Border Radius: The button's border radius. Can be used for increasing/decreasing the roundness of the edges. (Number | Pixels)
  • Background Color: The button's background color. (String | Hex)
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. →