Button

For more information on the importance of unique CTAs and how to write effective button, link, and CTA text, refer to the following sections in Anatomy:

• Accessibility, Links
• Content guidelines, Button
• Content guidelines, Links
• Component, Button
• Component, Links

If you find yourself wondering which to use, please refer to these guidelines:

Use the button style if the user will be taking an action, such as submitting a form.

Use the link style when the user is going to another location, meaning another page, another URL outside of current domain, or another part of the current page (jump link).

Use the call-to-action style when the link is the most important link on the page.

Use a link styled as a button to emphasize the link’s call to action or when the call to action needs to perform an action and take the user somewhere else.

Use a jump link to link to content farther down on the same page. Jump links are generally used for tables of content and on longer pages. Only use jump links when the page content can’t be split up into separate pages, tabs, or accordions. Do not overuse jump links. Make sure that the jump link text is descriptive enough for the user to know where the link leads just by reading it.

Note: the current solution is to add the ID to the element preceding the target element because of the sticky header.

Set the Button component to button default style when the action is not the primary action on the page.

Set the Button component to button assertive style when the action is the primary action on the page. There should be only one assertive action on the page because there should be only one primary action per page.

Set the Button component to button ghost style when the action is on a dark background. Make sure that the subtle style passes accessibility requirements of AAA on the selected background.

Only use the full-width style for buttons, never use this style for links.

This button style depends on responsive authoring. The button will be as wide as the columns it occupies, meaning that the author will be able to set the width of the button to anywhere from 1 column to all 9 columns (within the secondary navigation page template).

Use the full width button for actions that should be emphasized above the other call to actions on the page. Do not overuse full width buttons and don't use the full width style for links.

Set the Button component to default link style when the link is stands alone or for any link that cannot be triggered another way.

Set the Button component to subtle link style when the link function is obvious and there is another way to trigger the link.

Set the Button component to ghost link style when the action is on a dark background. Make sure that the subtle style passes accessibility requirements of AAA on the selected background.

Set the Button component to call-to-action link style when the link is the most important on the page. When you select this style, you will have the option to add an arrow icon. Add the arrow icon if you need to emphasize the CTA and indicate that the user will move forward on click of the CTA. Do not overuse this style.

When to add an icon to an action:

• If you want to emphasize that action
• If there aren’t many actions on the page already
• If a link is external and that is not obvious from the link’s text

Icon names must be lowercase when entered Icon field in the edit dialogue.

This icon should only be used for CTAs.

Use when the action to upload files.

Use when the action will be to bookmark something.

Use when the action is to close or remove or delete something.

Use when the action will lead to an email form.

Only use to signify an external link — external links are locations that do not live on the same domain.

Use to show a loading state.

Use when the action is to add something.

Use for a search field or to show a search function.

Use for share actions.

The Button Component has the same top margin, regardless of style. The top margin is applied to the top of the component.