Buttons
Buttons communicate the action that will occur when a user taps them.
Last updated
Was this helpful?
Buttons communicate the action that will occur when a user taps them.
Last updated
Was this helpful?
Buttons allow users to trigger an action. They may take the form of buttons or text links.
Labels are always title case
Labels clear and succinct
Labels are verbs or adverbs that express the action the button will trigger
Icons links should only be used when representing common paradigms
Buttons can be disabled but need to be conveyed by lowering the opacity to .4
Opaque, primary buttons are used for the most important action on a page. There should only be one primary button per page. Primary button come in 3 sizes: Large, Half Size, Small.
2. Container Primary CTAs can have 3 different container sizes: Large, Half Size, Small
When the content is longer than the page and scroll is enabled, primary buttons can sit in a container that sticks at the bottom of the page.
1. Divider Line (a-divider-dark) For easy viewing and separation, scroll buttons have a divider line.
2. Container
4. Supporting Info (Optional) When a scroll CTA has corresponding support information like the PreClaim state of the JDP, the container can be split with copy and Half Size Primary CTA. The copy must have a title (a-text-h3) and supporting copy like pricing.
Transparent secondary CTA buttons are used for subordinate actions. There can be multiple secondary CTAs per page.
2. Container Secondary CTAs can have 3 different container sizes: Large, Half Size, Small
To give half size or small secondary buttons more visual interest, icons (that represent the label) can be used.
2. Container Icon Buttons can have 2 different container sizes: Half Size, Small
Link CTAs are used for non-essential actions, like changes to existing content.
1. Label (a-text-button) Label text must follow the .
3.
1. Label (a-text-button) Label text must follow the .
1. Label is used for the icon. The size of the Font Awesome icon must match the size of the label text.
1. Label (a-text-paragraph) Label text must follow the .
