```
```tsx
import { Link } from '@govtech-bb/react';
Read about{' '}
renewing your passport
before you apply.
;
```
The Link component styles a text link with an underline and clear highlight
states: hovering shows a light teal background, and keyboard focus shows a
gold background instead of an outline, matching links in the error summary and
show/hide components.
## Usage
✓
When to use
Use a link to move to another page, service, file or location on the current page.
Use descriptive text that still makes sense when read without the surrounding sentence.
×
When not to use
Do not use a link to submit, save, delete or otherwise change data; use a button.
Do not use vague text such as “Click here” or repeat the same “Read more” label for different destinations.
## Best practices
### Describe the destination
Front-load meaningful words, for example “Apply for a driver's licence”. Tell
users about a file type or unusual destination when that information affects
their decision.
### Keep familiar link behaviour
Use an underline in body content, provide visible hover and focus states and
show visited state where it helps orientation. Avoid opening a new tab unless
there is a strong user need, and warn users when you do.
## External links
When an external service must open in a new tab, use `external`. It defaults
`target` to `_blank` and `rel` to `noopener noreferrer`. You can still provide
either native attribute explicitly when a destination needs different
behaviour. Make the link text clear that the destination is a separate service.
```html title="External link"
Visit the Government of Barbados portal
```
```tsx
import { Link } from '@govtech-bb/react';
Visit the Government of Barbados portal
;
```
## Links without a permanent underline
Add the `govbb-link--no-underline` modifier to show the underline only on
interaction. Use this in dense contexts or alongside already-underlined text,
where a permanent underline would add noise, for example a list of ministry
services in a navigation panel.
```html title="Link without a permanent underline"
Check your NIS contributions
```
```tsx
import { Link } from '@govtech-bb/react';
Check your NIS contributions
;
```
## Visited links
Add the `govbb-link--no-visited` modifier to keep visited links in the
surrounding text colour. Use this in navigation, where a changed visited
colour adds no useful information, but leave it off in long content pages,
where knowing which links you have already followed helps.
```html title="Link that keeps its colour after visiting"
Ministry of Home Affairs
```
```tsx
import { Link } from '@govtech-bb/react';
Ministry of Home Affairs
;
```