Buttons & Links

The action component is used in many places throughout our product suite. It is used variably in different situations. The action component can appear on the interface as a button or as a link, or as a button that looks like a link, or as a link that looks like a button.

Should I use a button or a link?

Buttons and links should not be used interchangeably. They do very different things and we should respect their individual jobs. If you find yourself wondering which to use, please refer to these guidelines:

Button

Use a button if it is used to perform an action.

Example

• Submit
• Save

Link

Use a link when it is used to navigate the user to another place in the product.

Example

• Back to search results
• View documentation

Button styled as a link (we call them text buttons)

Use a text button when the action is one of the below:

• Optional
• Dependent on other actions
• Should be less pronounced

Icons can be added to illustrate what the button will do to add clarity and make scanning easier.

Example

• Add Another
• Cancel (in modals)

Link styled as a button

Use a link styled as a button when the action component needs to perform the action and take the user somewhere else.

Example

• Creating a new object creates a new object and also takes the user into the object detail page

Buttons

Buttons should be used to perform an action on the page. See the Code Standards for more information on this topic.

Primary button

Primary buttons are used to indicate the page’s main action. There should only be one primary button per page or modal.

Secondary button

Secondary buttons are used for actions that are lesser, opposite, or relating to the page or modal’s primary button action.

Button with icon

Icons are used within buttons to indicate the progress of the button’s action or to illustrate the button’s action.

Mini button

Mini buttons are used for minor page actions or if there is not much space available. All buttons in tables are mini buttons.

Warning button

Warning buttons are used if the action is irreversible, destructive, or could result in a loss of data.

Text button

Text buttons are used for actions that are optional or are less important than other actions on the page.

Note: Text buttons can be disabled because they are buttons, not links.

Button text guidelines

• Use action words and keep it short
  • Ampersands (&) may be used in buttons to shorten the length
• Text may be an answer to a question within the interface, such as 'Are you sure?' question in warning modals
  • For example: 'Yes, Continue' or 'No, Undo' button text
• For primary buttons that create new objects use the format 'Create Object'

Links

Links are used to navigate the user through the product. Links are generally used for navigation, while buttons are used for anything that would change the state of the product.

The <a> element creates a link to other web pages, files, locations within the same page, email addresses, or any other URL. It should not be overridden by setting the href to javascript:void(0) or #. Links cannot be disabled.

Primary link

Primary links are used to link to other content either within the application or in another application.

Link with icon

Icons are used within links to illustrate the link's action.

Link text guidelines

• Use specific link text and state the destination of the link
• Avoid vague text such as
  • 'Click here'
  • 'Back'
  • 'View'
• Link text must make sense to users of assistive technology
• Link text must warn users if the destination will open in another tab or window

Configurations