Link

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

<a href="#" class="gi-link"></a>

{{ govieLink({"href": "#", "label": "Link with blue color"}) }}

import { Link } from '@govie-ds/react';

<Link href="#">This is a sample link</Link>

Link with inherited color

<a href="#" class="gi-link gi-link-inherit">Link with inherited color</a>

{{ 
  govieLink({
    "href": "#", 
    "label": "Link with inherited color", 
    "noColor": true
  }) 
}}

import { Link } from '@govie-ds/react';

<Link href="#" noColor>Link with inherited color</Link>

Link with no underline

<a href="#" class="gi-link gi-link-no-underline">Link with no underline</a>

{{ 
  govieLink({
    "href": "#", 
    "label": "Link with no underline", 
    "noUnderline": true
    }) 
}}

import { Link } from '@govie-ds/react';

<Link href="#" noUnderline>Link with no underline</Link>

Link with no visited color

<a href="#" class="gi-link gi-link-no-visited">Link with no visited color</a>

{{ 
  govieLink({
    "href": "#", 
    "label": "Link with no visited color", 
    "noVisited": true
    }) 
}}

import { Link } from '@govie-ds/react';

<Link href="#" noVisited>Link with no visited color</Link>

Open destination to another page/tab

<a href="#" 
    class="gi-link" 
    rel="noreferrer noopener" 
    target="_blank">
    Open destination to another page/tab
</a>

{{ 
  govieLink({
    "href": "#", 
    "label": "Open destination to another page/tab", 
    "isExternal": true
    }) 
}}

import { Link } from '@govie-ds/react';

<Link href="#" external>Open destination to another page/tab</Link>

When to use this component

Use the link component to create consistent, accessible, and visually appealing hyperlinks throughout your web application. This component is ideal when you need to provide both internal and external links with customizable styles, such as underlined text and different colors for visited and non-visited states. The component handles accessibility features like opening external links in a new tab with appropriate rel attributes (noreferrer and noopener), making it a great choice for scenarios where security and user experience are important. It also offers styling flexibility with options like no underline (noUnderline) and alternative visited link styling (noVisited).

When not to use this component

Avoid using the link component if you require more complex interactivity or behaviour than a standard hyperlink provides, such as navigation within single-page applications (SPAs) where a specialised React Router link component may be more appropriate. This component is also not suitable for situations where highly customised styles or advanced visual effects are needed that go beyond the default class options provided. If your design requires additional elements (like icons) or more intricate hover and focus effects that are not supported by the component’s predefined classes, consider creating a custom link element instead.