AXA Button
Buttons provide a clickable element, which can be used in forms, or anywhere else where simple, standard call-to-action functionality is needed. They can also provide styled link functionality. They may display text, icons, or both. Buttons can be styled via several properties to change their look-and-feel.
Properties
variant
| Attribute | Details |
|---|---|
variant="secondary" |
Button in a ghost state |
variant="red" |
Button red |
variant="inverted" |
Button inverted |
variant="inverted-blue-ocean" |
Button inverted blue ocean |
variant="inverted-red-tosca" |
Button inverted red tosca |
variant="inverted-purple-logan" |
Button inverted purple logan |
variant="inverted-green-viridian" |
Button inverted green viridian |
variant="inverted-blue-teal" |
Button inverted inverted blue teal |
type
| Attribute | Details |
|---|---|
type="button" |
Default button type (default if omitted) |
type="submit" |
Submit button submit for forms |
type="reset" |
Reset button for forms |
size
| Attribute | Details |
|---|---|
size="" |
Default button medium size |
size="small" |
button small size |
size="large" |
button large size |
block
By default, buttons are inline blocks, but setting this attribute block will change the button to a full-width block element.
motionOff
The Boolean attribute motionoff deactivates hover animation.
disabled
The Boolean attribute disabled disables the button natively.
icon
Based on the string-valued attribute icon, interpreted as icon name, an icon will be rendered. To see the full list of possible icons, see the axa-icon README.
href
The string-valued attribute href is used like in a native <a> hyperlink.
external
The Boolean attribute external adds the target="_blank" functionality.
onClick
The function-valued attribute onClick can be used as a callback prop for React and other frameworks.
className
With this string attribute you can set a CSS class to the component.