CTA

A closing call to action, centred or split with the actions on the end side.

Last updated October 15, 2026

Ready to build?

Copy the sections you need and ship.

Show code

<CTA heading="Ready to build?" description="Copy the sections you need and ship." primaryAction={{ label: 'Get started', href: '#' }} secondaryAction={{ label: 'Talk to us', href: '#' }} />

Add

npx @ava-ui/apogee add cta

API

Prop	Type	Default	Category	Description
`eyebrow`, `heading`, `description`	`string`	—	content	`heading` required.
`primaryAction`, `secondaryAction`	`{ label, href }`	—	content	Buttons.
`layout`	`'centered' \| 'split'`	`'centered'`	layout
`background`	Section background	`'primary-faded'`	layout
`spacing`, `headingLevel`, `id`			layout	As on every section.

Layouts

Pro

Upgrade when you are ready

Monthly or annual, cancel any time.

See pricing

Join the beta

Request access Read the FAQ

Questions?

We answer within a day.

Show code

<CTA layout="split" background="primary" … />
<CTA background="inverted" … />
<CTA background="neutral-faded" … />

Accessibility

A section labelled by its heading; actions are links styled as buttons, with neutral fills on solid backgrounds.