Button
A fundamental user interface element, buttons are essential for interaction.
They can be styled in various ways – different colors, shapes, and sizes to suit the application's design. Buttons can contain text, icons, or both, and they indicate interactivity, guiding users to take actions like submitting forms, opening modal windows, or navigating to different pages. They also support different states such as hover, active, or disabled, providing visual feedback to users.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Text
Button
Colors
Property
Value
Color
DANGER
Text
Button
Sizes
Property
Value
Size
MEDIUM
Text
Button
Variants
Property
Value
Variant
SECONDARY
Text
Button
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Configuration Properties
Property
Description
Default Value
Type
Text
The text of the button.
String
Variant
The variant of the button.
Primary
String
Size
The size of the button.
Large
String
Color
The color of the button.
Brand
String
Prefix icon
Prefix icon.
Icon
Suffix icon
Prefix icon.
Icon
Misc Properties
Property
Description
Default Value
Type
Disabled
Whether the button is disabled.
Bool
Loading
Whether the button is loading.
Bool
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the button is clicked.
On double click
Triggered when the button is double clicked.