Button
This component is used to make clickable actions on the page
The button is one of the commonly used components on the page. But you should use this component correctly. Choose a suitable variant, role and icons to make your buttons easy-to-understand for users.
Variants
There are four different variants for buttons. They do not have any differences in functionality, only in styles. Use the variants that suit your design.
ButtonVariant
Context Menu
You can use button as a dropdown. To do that you should provide a ContextMenuType object to dropdown
property. Pay attention that in that case onClick
property won't work while you have dropdown
property.
Properties
Property | Type | Description |
---|---|---|
|
| Content of the button |
|
| Callback fires when user clicks on the button |
| Role of the button. Default value is default | |
| Variant of style | |
|
| Makes button as a link |
|
| Change target attribute for link-button |
|
| If true the button will take full width of the parent component. Default value is |
|
| Adds an icon to the left side of the button |
|
| Adds an icon to the right side of the button |
| Size of the button | |
| If passed shows a dropdown when user clicked on the button | |
|
| Use this prop in cases when your |
| Adds indicator to the button | |
|
| Hides button content and show loading animation. Default value is |
|
| Shows a thin progress bar below the button content. Default value is |
|
| Mark the button as disabled. Default value is |
|
| Change type of the button. This changes |
| Shadows of the button. Default value is | |
|
| Custom CSS class |
History
Altrone 2.0
:added
elevation
propadded
loading
propadded
progress
prop
Altrone 1.1
:added
indicator
prop
Altrone 1.0
: initial release
Last updated