Button
Examples
Links
Links with button styling. Semantic buttons and links are important for usability as well as accessibility. Using an "a" instead of a "button" element to perform user initiated actions should be avoided, unless absolutely necessary.
Button Props
The Button component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | '' | content rendered inside the button | |
| className | string | '' | additional classes added to the button | |
| component | custom | 'button' | Sets the base component to render. defaults to button | |
| isActive | bool | false | Adds active styling to button. | |
| isBlock | bool | false | Adds block styling to button | |
| isDisabled | bool | false | Disables the button and adds disabled styling | |
| isFocus | bool | false | Adds focus styling to the button | |
| isHover | bool | false | Adds hove styling to the button | |
| type | enum: button, submit | 'button' | Sets button type | |
| variant | enum: primary, secondary, tertiary, danger, link, plain | 'primary' | Adds button variant styles | |
| aria-label | custom | null | Adds accessible text to the button. Required for plain buttons |