---
name: Link with arrow
route: /components/common/link-with-arrow
edit: false
---

import { Playground, Props } from 'docz'
import LinkWithArrow from './link-with-arrow'

# LinkWithArrow
**SUBCATEGORY:** Navigation

<hr />

## Link with arrow
### Description
For important links, and for linking to related content.

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
  />
</Playground>

**Selected**

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    selected
  />
</Playground>

<hr />

## Link with arrow (minor)
### Description
For important links, and for linking to related content.

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    minor
  />
</Playground>

**Selected**

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    minor
    selected
  />
</Playground>

<hr />

## Link with arrow (serif)
### Description
For important links, and for linking to related content.

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    serif
  />
</Playground>

**Selected**

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    serif
    selected
  />
</Playground>

<hr />

## Link with arrow (serif, minor)
### Description
For important links, and for linking to related content.

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    minor
    serif />
</Playground>

**Selected**

<Playground>
  <LinkWithArrow
    text='Link with arrow'
    href='/'
    minor
    serif
    selected />
</Playground>

<hr />

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