Buttons
Buttons serve the purpose Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Buttons must adhere to the following order of classes.
button type button color button size
Primary Buttons
For the principal call to action on the page. These should be used to visually guide the user to the desired primary objective.
Size Variants
Class:
aw-button-primary
Modifier:
aw-button-primary--small
Class:
aw-button-primary
Modifier:
aw-button-primary--medium
Class:
aw-button-primary
Modifier:
aw-button-primary--large
Color Variants
Class:
aw-button-primary
Modifier:
aw-button-primary--white
Class:
aw-button-primary
Modifier:
aw-button-primary--danger
Class:
aw-button-primary
Modifier:
aw-button-primary--ghost
Class:
aw-button-primary
Modifier:
aw-button-primary--danger-ghost
With Icons
Class:
aw-button-primary
Class:
aw-button__icon
Class:
aw-button-primary
Modifier:
aw-button-primary--icon-right
Class:
aw-button__icon
Modifier:
aw-button__icon--right
Class:
aw-button-primary
Modifier:
aw-button-primary--ghost
Class:
aw-button__icon
Class:
aw-button-primary
Modifier:
aw-button-primary--icon
Class:
aw-button__icon
Secondary Buttons
For the principal call to action on the page. These should be used to visually guide the user to the desired primary objective.
Size Variants
Class:
aw-button-secondary
Modifier:
aw-button-secondary--small
Class:
aw-button-secondary
Modifier:
aw-button-secondary--medium
Class:
aw-button-secondary
Class:
aw-button-secondary
Modifier:
aw-button-secondary--large
Color Variants
Class:
aw-button-secondary
Modifier:
aw-button-secondary--white
Class:
aw-button-secondary
Modifier:
aw-button-secondary--danger
With Icons
Class:
aw-button-secondary
Class:
aw-button__icon
Class:
aw-button-secondary
Modifier:
aw-button-secondary--icon-right
Class:
aw-button__icon
Modifier:
aw-button__icon--right
Class:
aw-button-secondary
Modifier:
aw-button-secondary--icon
Class:
aw-button__icon
Button Alignment
Button alignment utility classes are available for the following breakpoints: lg, md and sm.
Class:
aw-buttons
Modifier:
aw-buttons--space-between
Class:
aw-buttons
Modifier:
aw-buttons--center
Class:
aw-buttons
Modifier:
aw-buttons--right
Buttons Stacked Vertical/Left
Class:
aw-buttons
Modifier:
aw-buttons--stack
Buttons Stacked Vertical/Center
Class:
aw-buttons
Modifier:
aw-buttons--stack-center
Buttons Stacked Vertical/Right
Class:
aw-buttons
Modifier:
aw-buttons--stack-right
