CtaSection

Close a section with a clear next step, an optional secondary route and concise supporting context.

CtaSection

View source ยท API reference

Primary and secondary destinations

Both actions are real links. A button appears only when its label and destination are supplied.

KEEP EXPLORING

Build your next interface

Start with a surface, then add the interaction.

Explore Panel Browse all components

Source included in every guide.

<CtaSection
  eyebrow="KEEP EXPLORING"
  title="Build your next interface"
  subtitle="Start with a surface, then add the interaction."
  primaryLabel="Explore Panel"
  primaryHref="/components/layout/panel/"
  secondaryLabel="Browse all components"
  secondaryHref="/components/"
  meta="Source included in every guide."
  tone="accent"
/>

Add a custom action

The actions slot follows the built-in links.

Choose a layout

Match the structure to your content.

One axis Two axes 
<CtaSection
  title="Choose a layout"
  subtitle="Match the structure to your content."
  variant="outline"
>
  <template #actions>
    <BtnLink href="/components/layout/flex/" variant="outline">One axis</BtnLink>
    <BtnLink href="/components/layout/grid/" tone="accent">Two axes</BtnLink>
  </template>
</CtaSection>

Behavior and accessibility

The title is h2. Use specific action labels that describe the destination. Primary and secondary actions are BtnLink components, so navigation retains native link behavior.

API reference

CtaSection contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

subtitle

RefOrValue<string>
Default
not set

Supporting text beneath the title.

primaryLabel

RefOrValue<string>
Default
not set

Visible primary link text. Requires the matching Href prop.

primaryHref

RefOrValue<string>
Default
not set

Primary link destination. Requires the matching Label prop.

primaryIcon

RefOrValue<string>
Default
not set

Registered SVG icon for the primary link.

secondaryLabel

RefOrValue<string>
Default
not set

Visible secondary link text. Requires the matching Href prop.

secondaryHref

RefOrValue<string>
Default
not set

Secondary link destination. Requires the matching Label prop.

secondaryIcon

RefOrValue<string>
Default
not set

Registered SVG icon for the secondary link.

meta

RefOrValue<string>
Default
not set

Secondary context such as an update time, limitation or reassurance.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

Composition

actions slot: additional actions. There is no default content slot. Register defineCtaSectionComponent with Panel, Grid, SectionHeader, Flex and BtnLink dependencies.