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 may display text, icons, or both. Buttons can be styled via several properties to change their look-and-feel.
If you need a link with button styling, use axa-button-link instead.
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 |
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.
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.