Link
Links help users navigate to related information, perform secondary actions, or access external websites. They are styled to be clear, consistent and accessible.
By default, links use bold text (700 weight), are underlined with a 4px offset for improved readability, and use a 16px font size. The default colour is primary[800] from the NSW Government palette, but this can be customised. You can also adjust the size, weight, line height, spacing and colour while maintaining accessibility and consistent display across platforms.
Use links where they add value to body text, support content, or provide secondary actions that sit alongside a primary call to action (CTA). For example, a link might direct users to related resources or additional guidance.
When to use
Use a link to:
- take users to related or supporting content
- provide access to secondary actions that don’t need a button
- reference external websites or documents
- supplement text with extra navigation options.
Design guidance
- Use clear and descriptive link text, so users know what to expect. For example, write Download the report instead of Click here.
- Place links within meaningful text or close to related actions. This improves scanning and accessibility.
- Always use absolute URLs (for example,
https://www.nsw.gov.au/example). Relative URLs may not work in some email clients. - Avoid JavaScript-based links or tracking scripts, as they may reduce accessibility and break in email environments.
- Do not use links instead of buttons when a clear primary CTA is required.
Variations
Links are styled consistently across email templates for predictability, accessibility and brand alignment.
They may include optional icons or arrows to reinforce direction, but these do not change the function of the link.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | The URL the link points to. Always use absolute URLs (https://...) for reliable behaviour across email clients. |
color | string | page.primary[800] | The text colour of the link. By default, links use the NSW primary palette for brand consistency. Other NSW palette colours can be applied if needed. |
underline | boolean | true | Controls whether the link is underlined. Links are underlined by default for accessibility and clarity. Should not normally be disabled. |
weight | number | 700 | Font weight of the link text. Bold (700) is the default to help links stand out in body copy. |
size | string | number | 16px | Font size for the link text. Defaults to 16px for readability across devices. |
lineHeight | string | number | 1.5 | Sets the line height for the link text, ensuring legibility in body copy. |
letterSpacing | string | 0.5px | Optional letter-spacing to improve clarity and scannability. Defaults to 0.5px. |
icon | string | — | Optional icon or arrow placed alongside the link text. For example, “Learn more →”. |