Buttons and links
Buttons communicate and trigger actions a user can take in an application or website. Links are used to take users somewhere, like another page inside of a web application, or an external site such as help or documentation.
Technically, a button represents a box area that can be clicked or tapped, while a link represents text that can be clicked or tapped.
A button should represent an action a user can take, like submitting a form, cancelling a process, or creating a new object. When the user clicks a button, the associated action should be triggered or performed immediately.
Use different button types to build hierarchy in an application layout.
Use primary buttons for the main action you want a user to take on a page. Try to limit primary buttons to one per page.
Use secondary buttons for secondary actions a user can take. For example, a cancel button would be secondary to a submit button on a form or modal.
Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data.
Use a text button for secondary or tertiary actions on a page or modal. For example, you might use text buttons to indicate actions a user might take on items in a data list or table to reduce visual clutter and save space.
Use icon buttons for actions that are commonly associated with icons. For example, you could use the close icon to exit a modal or window, or use the hamburger icon to toggle a menu.
Links are used to take users somewhere, like another page inside of a web application, or an external site like help or documentation.
For links that navigate users to any location external to the current website or application, link text must be followed by the external link icon.
Don't use link text to represent actions.
Writing button labels
- Button labels should be specific and clearly communicate their associated action.
- Always use verbs or verb phrases.
- Aim for short (1-3 words) labels wherever possible.
- Avoid long button labels that might risk wrapping.
Writing link labels
Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read View dashboard. For a link directing a user to a support forum, you might say Get help in the support forum.
See our content guidelines for additional guidance.