---
name: Call-to-action with arrow
route: /components/common/call-to-action-with-arrow
edit: false
---

import { Playground, Props } from 'docz'
import CallToActionWithArrow from './call-to-action-with-arrow'

# CallToActionWithArrow
**SUBCATEGORY:** Navigation

<hr />

## Call-to-action with arrow
### Description
A call-to-action draws attention to a specific, high-priority link.
Use sparingly and tastefully to demonstrate the single-most dominant link.

<Playground>
  <CallToActionWithArrow
    href='/call-to-action-with-arrow'
    text='View subscription options'
  />
</Playground>

<hr />

## Call-to-action with arrow (inverse)
### Description
A call-to-action draws attention to a specific, high-priority link.
Use sparingly and tastefully to demonstrate the single-most dominant link.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <CallToActionWithArrow
    href='/call-to-action-with-arrow'
    text='View subscription options'
    inverse
  />
</Playground>

<hr />

## Call-to-action with arrow (secondary)
### Description
A call-to-action draws attention to a specific, high-priority link.
Use to compliment the primary call-to-action with arrow and establish a visual hierarchy of links.

<Playground>
  <CallToActionWithArrow
    href='/call-to-action-with-arrow'
    text='View subscription options'
    secondary
  />
</Playground>

<hr />

## Call-to-action with arrow (inverse, secondary)
### Description
A call-to-action draws attention to a specific, high-priority link.
Use to compliment the primary call-to-action with arrow and establish a visual hierarchy of links.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <CallToActionWithArrow
    href='/call-to-action-with-arrow'
    text='View subscription options'
    inverse
    secondary
  />
</Playground>

<hr />

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