CtaButton

Demos

Default

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton icon={<Icon i={IconArrowRight} />}>
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

White

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton variant='white' icon={<Icon i={IconArrowRight} />}>
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Small

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--road-black-060)',
      }}
    >
      <CtaButton size='small' icon={<Icon i={IconArrowRight} />}>
        Discover more
      </CtaButton>
      <CtaButton
        variant='white'
        size='small'
        icon={<Icon i={IconArrowRight} />}
      >
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Grey

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton variant='grey' icon={<Icon i={IconArrowRight} />}>
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Grey Small

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton
        variant='grey'
        size='small'
        icon={<Icon i={IconArrowRight} />}
      >
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Tiny

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton size='tiny' icon={<Icon i={IconArrowRight} />}>
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

White Tiny

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton
        variant='white'
        size='tiny'
        icon={<Icon i={IconArrowRight} />}
      >
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Grey Tiny

Fullscreen
import { CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div
      style={{ padding: '1rem', background: 'var(--road-black-060)' }}
    >
      <CtaButton
        variant='grey'
        size='tiny'
        icon={<Icon i={IconArrowRight} />}
      >
        Discover more
      </CtaButton>
    </div>
  )
}

export default Demo

Props