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

import { Playground, Props } from 'docz'
import CallToAction from './call-to-action'

# CallToAction
**SUBCATEGORY:** Navigation

<hr />

## Call-to-action
### Description
A call-to-action draws attention to a specific, high-priority link.

<Playground>
  <CallToAction
    href='/call-to-action'
    text='Subscribe'
  />
</Playground>

<hr />

## Call-to-action (inverse)
### Description
A call-to-action draws attention to a specific, high-priority link.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <CallToAction
    href='/components-subscribe-cta'
    text='Subscribe'
    inverse
  />
</Playground>

<hr />

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

<Playground>
  <CallToAction
    href='/call-to-action'
    secondary
    text='Subscribe'
  />
</Playground>

<hr />


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

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <CallToAction
    href='/components-subscribe-cta'
    text='Subscribe'
    inverse
    secondary
  />
</Playground>

<hr />

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