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

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

# LinkWithArrowIcon
**SUBCATEGORY:** Navigation

<hr />

## Link with arrow icon
### Description
For drawing attention to important links.

<Playground>
  <LinkWithArrowIcon
    text='Link with arrow icon'
    href='/'
  />
</Playground>

<hr />

## Link with arrow icon (heavy)
### Description
For drawing attention to important links.

<Playground>
  <LinkWithArrowIcon
    text='Link with arrow icon'
    href='/'
    heavy
  />
</Playground>

<hr />

## Link with arrow icon (inverse, heavy)
### Description
For drawing attention to important links.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <LinkWithArrowIcon
    text='Link with arrow icon'
    href='/'
    inverse
    heavy
  />
</Playground>

<hr />

## Link with arrow icon (minor)
### Description
For drawing attention to important links.

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

<hr />

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