Brand
Brand identity elements
Atoms
Atoms
Molecules
Molecules
Organism
Organism

Button

Buttons are CTAs that allow users to make choices and take actions

import '@axa-ch/button';
...
<axa-button>
Button
</axa-button>

Usage

Buttons are typically placed throughout your UI, in places like:

  • Dialogs
  • Modal windows
  • Forms
  • Cards
  • Toolbars

Variation

<axa-button>
Primary
</axa-button>
<axa-button variant="secondary">
Secondary
</axa-button>
<axa-button variant="red">
Red
</axa-button>
<axa-button variant="inverted">
Inverted
</axa-button>

Sizes

<axa-button size="small">
Small size
</axa-button>
<axa-button>
Medium size
</axa-button>
<axa-button size="large">
Large size
</axa-button>

State

<axa-button>
Normal size
</axa-button>
<axa-button disabled>
I am disabled
</axa-button>

Icons

<axa-button variant="secondary" icon="arrow-left">
Normal size
</axa-button>
<axa-button variant="secondary" icon="arrow-right">
I am disabled
</axa-button>

Help & Contact

Any question?