A NSW Government website
Design System v3.18.4

Link

Links are elements that allow you to navigate between different webpages or different sections within the same webpage.

Usage

Link text should be clear and meaningful.

Use links to:

  • navigate between different pages and sections
  • navigate to an external website
  • jump to an element on the same page
  • link to information such as emails or phone numbers

Links vs. buttons

While buttons and links are similar, they differ in usage and behaviour.

  • Links are used to navigate, directing users to different pages or sections. They are suited for textual content that requires a link to additional information or related resources.
  • Buttons are better suited as interactive elements that trigger actions or perform a specific task when clicked or activated, such as submitting a form, initiating downloads, opening modals or dialog boxes or initiating user interactions within the interface.

Link icons

Using icons that convey meaning can enhance the user experience.

Commonly icons used with links:

  • External link icon: to navigate to a different website or web page outside the current domain.
  • Download icon: to view or download a document, such as a PDF or Word file.
  • Phone icon: to call or contact a phone number.
  • Email icon: to open the default email client to compose a new message.
  • Calendar icon: to link to a calendar, scheduling functionality or an .ical file.

When to avoid

Do not:

  • overload content with excessive links, instead use only when necessary
  • use generic terms like 'click here', 'see', 'more' or 'more information'
  • use a URL for link text. Use link text that clearly identifies the target of the link
  • make the link text too long. Only link the main words
  • use the same link text for different URLs on the same page
  • use end punctuation. If your link is at the very end of a sentence, make sure that the full stop is not part of the linked text

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Maecenas at risus ullamcorper odio facilisis ultrices et et metus.