CTA
Call-to-action section with centered or split layout and token-styled action buttons.
Preview
Import
import { CTA } from "@sigil-ui/components";Usage
<CTA title="Start building with Sigil" description="Choose a preset and compose your first page." actions={[{ label: "Read the setup guide", href: "/docs/installation" }]} />Centered (default)
<CTA
title="Start building today"
description="No credit card required. Free for open-source."
actions={[{ label: "Sign up free", href: "/signup" }]}
/>Split layout
<CTA
variant="split"
title="Join 10,000+ developers"
description="Ship faster with a design system that works."
actions={[
{ label: "Get started", href: "/docs" },
{ label: "Book a demo", href: "/demo" },
]}
/>With custom children
<CTA title="Custom CTA" variant="split">
<button className="h-11 px-6 bg-[var(--s-primary)] text-white rounded-[var(--s-radius-md)]">
Custom button
</button>
</CTA>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | CTA headline |
description | string | — | Supporting text |
actions | CTAAction[] | — | Action buttons ({ label, href?, onClick? }) |
variant | "centered" | "split" | "centered" | Layout variant |
children | ReactNode | — | Additional content in the actions area |
className | string | — | Additional CSS classes |