Button
Buttons are basic interface elements that initialize an action or function when the user interacts with them. The appearance of the button should suggest the user takes an action that leads to different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to Action) components, which basically are designed to capture user attention and improve the user experience within the application.
| Name | Type | Description | Default |
|---|---|---|---|
| label | string | Text to be placed in the button. | - |
| mode | 'primary' | 'secondary' | 'tertiary' | The available button modes. | 'primary' |
New | 'default' | 'error' | 'warning' | 'success' | 'info' | Specifies the semantic meaning of the buttons, which determines its color. | 'default' |
| title | string | Text representing advisory information related to the button's action. Under the hood, this prop also serves as an accessible label for the component. | - |
| type | 'button' | 'reset' | 'submit' | Sets the type attribute of the HTML button element. See MDN for further information. | 'button' |
| icon | string | (React.ReactNode & React.SVGProps <SVGSVGElement>) | Material Symbol name or SVG element as the icon that will be placed next to the label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_". | - |
| iconPosition | 'before' | 'after' | Whether the icon should appear after or before the label. | 'before' |
| disabled | boolean | If true, the component will be disabled. | false |
| onClick | () => void | This function will be called when the user clicks the button. | - |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
New | { height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' } | Object used to define the dimensions of the button in terms of height and width. | { height: 'large'; width: 'fitContent' } |
| tabIndex | number | Value of the tabindex attribute. | 0 |