Inline CTA

A compact promo block for a sidebar rail or the end of a content column — upgrade nudges, team invites, changelog pointers.

tsx

1import { InlineCta } from "@pestoui/core"

Default

Card elevation and radius with no card chrome. Title, description, a leading squircle icon and an actions row are all optional slots.

Unlock unlimited runs

You have used 80% of this month's agent runs. Upgrade to keep them flowing.

inverse flips to the dark surface; gradient paints a fixed pastel cover and pins the ink dark so it stays legible in both themes.

Invite your team

Shared agents, shared runs, one billing seat.

Agents 2.0 is live

Faster runs, richer tool calls, and a new activity timeline.

The four pastel covers. onDismiss adds the close button in the corner — the block owns no visibility state of its own.

Sky

Pastel cover, dark ink in both themes.

Sunrise

Pastel cover, dark ink in both themes.

Blossom

Pastel cover, dark ink in both themes.

Meadow

Pastel cover, dark ink in both themes.

Prop	Type	Default	Description
title	React.ReactNode	—	Headline. Required — it also supplies the group's accessible name.
description	React.ReactNode	—	Muted supporting line under the title.
variant	"default" \| "inverse" \| "gradient"	"default"	Surface treatment — bordered paper, the dark inverse fill, or a pastel gradient cover.
gradient	"sky" \| "sunrise" \| "blossom" \| "meadow"	"sky"	Which pastel cover to paint. Ignored unless variant is “gradient”.
icon	React.ReactNode	—	Decorative mark rendered inside a leading squircle above the title.
actions	React.ReactNode	—	Buttons or links in a wrapping row under the copy.
onDismiss	() => void	—	Adds the close button in the top-right corner and fires on click.
dismissLabel	string	"Dismiss"	Accessible name for the close button.

Pesto UI · 117 documented components