This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.
If you have any questions, please contact us.
This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.
If you have any questions, please contact us.
Buttons serve as a call to action, making it essential that users know which items they can interact with, and what action will be taken upon clicking. Our button system provides an array of button styles to accommodate different levels of emphasis for each action.
To maintain elements that are usable on all devices, we use a minimum touch target size of 44px. Buttons and text links must be this size to help users easily recognize an action and interact with the experience.
Emphasis: Medium
Default buttons are used in most situations. Use these buttons for component-level actions, and when there are repeating actions in the same area.
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Emphasis: High
Prominent buttons are used for primary page-level actions, and should only be used once per page. Not all pages require a Prominent button. Use for call-to-actions, page navigation or process flows.
Representative Use Cases:
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Emphasis: Low
Outlined buttons are used for less prominent actions. They can be paired with Default or Primary buttons. They should be used sparingly by themselves.
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Default
Hover
Active
Disabled
Emphasis: Lowest
Text buttons are available when an additional level of hierarchy is needed. Text buttons have the smallest footprint, and should be used sparingly.
Icon buttons are used as shorthand for actions when space is limited, or to maintain proper hierarchy. Icons should be used to convey actions. Icons in buttons should be functional — clicking or touching them should perform an action.
Multiple buttons may be needed to offer a user adequate options. Information on implementation below.
Desktop
1 Column
With Other Elements
With Other Icons
There are a range of button styles available to accommodate diverse needs across products. It’s important to use these styles to maintain a clear hierarchy on the page.
1) Prominent Button: Used to place high emphasis on the primary call-to-action on the page.
2) Default Button: Used for medium emphasis on the primary component-level action.
3) Subtle Button: Used to place low emphasis on a supporting component-level action.
4) Text Button: Used in the module with the lowest emphasis on the page.
1 & 3) Subtle Buttons: Used for a low-emphasis page-level action and used as the as the opposite action
2) Default Button: Used for medium emphasis on the primary component-level action.
4) Text Button: Used in the module with the lowest emphasis on the page.
5) Prominent Button: Places high emphasis on the primary call-to-action on the page.
Aon Consumer Experience & Design Group
200 E. Randolph St.
5th Floor
Chicago, IL 60601
global.design@aon.com
For best results, please view on Desktop in Chrome or Firefox.