---
name: Emphasised link
route: /components/common/emphasised-link
edit: false
---

import { Playground, Props } from 'docz'
import EmphasisedLink from './emphasised-link'

# EmphasisedLink
**SUBCATEGORY:** Navigation

<hr />

## Emphasised link
### Description
For links of greatest importance. Limit the number of emphasised links on screen to avoid disminishing the link’s prominence. Useful for linking to content and external actions.

<Playground>
  <EmphasisedLink
  text='Emphasised link'
  href='/' />
</Playground>

<hr />

## Emphasised link (inverse)
### Description
For links of greatest importance. Limit the number of emphasised links on screen to avoid disminishing the link’s prominence. Useful for linking to content and external actions.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <EmphasisedLink
  inverse
  text='Emphasised link'
  href='/' />
</Playground>

<hr />

## Emphasised link (secondary)
### Description
For links of greatest importance. Limit the number of emphasised links on screen to avoid disminishing the link’s prominence. Useful for linking to content and external actions.

<Playground>
  <EmphasisedLink
  variant='secondary'
  text='Emphasised link'
  href='/' />
</Playground>

<hr />

## Properties
<Props of={EmphasisedLink} />