CTA Modal

A modal component for displaying call-to-action messages.

import { CTAModal, useCTAModal, createCTAModalActions } from '@cerberus/react'

Usage

To use the CTAModal, wrap your component with the CTAModal provider and use the useCTAModal hook to access the show method.

To create your actions, use the createCTAModalActions function.

'use client'

import { Button, useCTAModal, createCTAModalActions } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function CTAFeature() {
  const { show } = useCTAModal()

  const handleClick = useCallback(() => {
    show({
      heading: 'Copy or create a Cohort',
      description: 'Create a new cohort or copy an existing one.',
      actions: createCTAModalActions([
        {
          text: 'Create new',
          handleClick: () => alert('Create new'),
        },
        {
          text: 'Copy existing',
          handleClick: () => alert('Copy existing'),
        },
      ]),
    })
  }, [show])

  return (
    <HStack gap="4">
      <Button onClick={handleClick}>Update Cohorts</Button>
    </HStack>
  )
}

import { CTAModal } from '@cerberus/react'
import { CTAFeature } from './action-dialog'

function SomePage() {
  return(
    <CTAModal>
      <CTAFeature />
    </CTAModal>
  )
}

With Links

To use links instead of buttons, pass your link components to the createCTAModalActions function.

'use client'
import { Button, useCTAModal, createCTAModalActions } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'
import Link from 'next/link'

function CTALinkFeature() {
  const { show } = useCTAModal()

  const handleLinkClick = useCallback(() => {
    show({
      heading: 'Copy or create a Cohort',
      description: 'Create a new cohort or copy an existing one.',
      actions: createCTAModalActions([
        <Link key="cta:link:btn" href="/react/button">
          See Button Docs
        </Link>,
        <Link key="cta:link:docs" href="/react/dialog">
          See Dialog Docs
        </Link>,
      ]),
    })
  }, [show])

  return (
    <HStack gap="4">
      <Button onClick={handleLinkClick}>Update Cohorts</Button>
    </HStack>
  )
}

import { CTAModal } from '@cerberus/react'
import { CTALinkFeature } from './link-dialog'

function SomePage() {
  return(
    <CTAModal>
      <CTALinkFeature />
    </CTAModal>
  )
}

With Content

To use a custom content component, pass your custom component to the content prop of the show method.

'use client'

import { Button, useCTAModal, createCTAModalActions } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function CTAFeature() {
  const { show } = useCTAModal()

  const handleClick = useCallback(() => {
    show({
      heading: 'Copy or create a Cohort',
      content: (
        <VStack alignItems="flex-start" gap="lg" w="full">
          <Field label="Name">
            <Input placeholder="e.g., Cerberus" />
          </Field>
          <Field label="Description">
            <Textarea placeholder="e.g., Cerberus is a design system..." />
          </Field>
        </VStack>
      ),
      actions: createCTAModalActions([
        {
          text: 'Create new',
          handleClick: () => alert('Create new'),
        },
        {
          text: 'Copy existing',
          handleClick: () => alert('Copy existing'),
        },
      ]),
    })
  }, [show])


  return (
    <HStack gap="4">
      <Button onClick={handleClick}>Update Cohorts</Button>
    </HStack>
  )
}

import { CTAModal } from '@cerberus/react'
import { CTAFeature } from './action-dialog'

function SomePage() {
  return(
    <CTAModal>
      <CTAFeature />
    </CTAModal>
  )
}

Primitives

The CTAModal is an abstraction of the Dialog primitives and does not provide any additional customization. To build your own CTAModal, use the Dialog components.

API

The CTAModal component is an abstraction of the Dialog and accepts the same props as the Dialog component.

Show Method Options

The show method accepts the following options:

Name	Default	Description
heading	`''`	The heading of the modal.
description	`''`	The description of the modal.
icon	`undefined`	The icon to display in the modal.
actions	`[]`	The actions to display in the modal. Requires the use of `createCTAModalActions` utility.

Utilities

The createCTAModalActions utility accepts an array of objects with the following properties or ReactNodes:

Action

Name	Default	Description
text	`''`	The text of the action.
handleClick	`undefined`	The click handler of the action.

Link

Pass your Array of link components to the createCTAModalActions function.

On this page

Edit this page on Github