In most contexts, links will navigate the user to a new page. They can also toggle between different layouts for displaying data or bring up a contextual help message. Link text is styled specifically so it will stand out from standard text content.
Avoid text wrapping links wherever possible. If the linked action will allow the user to change data or navigate to the next screen in a flow, use a button instead.
Text links can appear with associated icons, such as the question mark on help links or the map pin on location links. The icon is interactive and forms part of the navigation. It will have the same states as a text link. Refer to our icon library for available icons.
Icon links are available in three different sizes, small (12px) for captions and less prominent actions, medium (16px) for links in body content, and large (24px) for links that appear in larger text content.
Link assets are available at the 16px size when used in body copy and at the 12px size when used to trigger contextual help. Choose the size that is appropriate for your layout needs.
Like buttons, links should use strong verbs and specific language to clearly signal what will happen next. Do not use "here" or "click here" in the link text. Keep text as short as possible to prevent wrapping. In inline text, limit the link text to only the most relevant part of the sentence - aim for 3-5 words. Only include ending punctuation in the link if it is a standalone.