Inline CTAs

A small offer inside the page: four shared parts, a media rail, and seven typed presets. DrumKit-authored from Figma page 127:2907 per ADR-0001.

Demo

hero

Recently updated

We’ve just shipped a faster editor, a new command menu, and a handful of fixes.

Type
import { InlineCTAActions } from "@/components/application/inline-cta/inline-cta-actions"; import { Button } from "@/components/base/buttons/button"; <InlineCTAActions title="Recently updated" description="We’ve just shipped a faster editor, a new command menu, and a handful of fixes." > <Button color="secondary">Dismiss</Button> <Button>See what’s new</Button> </InlineCTAActions>

In context

in-context
View in a page

Family

family

Six parts from one module; the seven Types compose them.

What’s new

InlineCTA.Root
InlineCTA.Media

Recently updated

A faster editor and a new command menu.

InlineCTA.Text
InlineCTA.Actions

Basic plan

$10 per month

InlineCTA.Card
InlineCTA.CheckIcon

Types

cells

The sheet's seven Types, each its own preset.

New feature available

Check out the new dashboard view. Pages now load faster.

Actions: InlineCTAActions

Explore the new gallery templates

Twelve fresh layouts, ready to apply to any shoot.

Image: InlineCTAImage

Subscribe to our newsletter

Get the latest posts and product news, once a month.

Email field: InlineCTAEmailField

Change your plan

Upgrade or downgrade at any time. Changes are prorated.

Growth

$20per month

Everything in Basic, plus unlimited projects and priority support.

Change plan: InlineCTAChangePlan

Upgrade your plan

You’re on the free plan. Here is what the team plan adds.

  • Unlimited seats

    Invite the whole team, not just the people who edit.

  • Full version history

    Roll any document back to any point in the last year.

Upgrade plan: InlineCTAUpgradePlan

Payment method

Change how you pay for your plan.

Visa ending in 1234

Expiry 06/2028

billing@untitledui.com

Payment method: InlineCTAPaymentMethod

Your receipt is ready

Your invoice for August 2026 has been issued.

Invoice 007.pdf

720 KB

Receipt: InlineCTAReceipt

Layouts

cells

Below sm, in a real viewport at the sheet's Mobile frame width.

Mobile breakpoint

Actions at phone width: stacked actions, primary on top
Image at phone width: the rail on top, full width
Email field at phone width: a column, full-width submit
Change plan at phone width: stacked actions inside the card
Upgrade plan at phone width: the list unchanged, actions stacked
Payment method at phone width: Edit without its chrome
Receipt at phone width: the card's chrome gone, children stacked

Action row

from sm: a row, secondary first, primary last
below sm: stacked full width, primary on top, DOM order unchanged

Tones

cells

InlineCTA.Card

Basic plan

Up to 10 users and 20GB of storage.

tone primary: Payment method and Receipt

Basic plan

Up to 10 users and 20GB of storage.

tone alt: Change plan

Content

cells

The gallery, proofing and delivery workflow has a new home in the sidebar

Check out the new dashboard view. Pages now load faster.

Actions, a long title wraps

New feature available

Actions, no description

New feature available

Check out the new dashboard view. Pages now load faster.

Actions, one action

Upgrade your plan

You’re on the free plan. Here is what the team plan adds.

  • Unlimited seats

  • Full version history

    Roll any document back to any point.

Upgrade plan, a feature without a description

Your receipt is ready

Your invoice for August 2026 has been issued.

Invoice-2026-08-gallery-sessions-retouching-and-print-orders-final.pdf

1.2 MB

Receipt, a long file name in a narrow column

Change your plan

Upgrade or downgrade at any time. Changes are prorated.

Growth

$240

Billed once a year.

Change plan, no period

Loading

cells

Payment method

Loading payment method
description present, both real
Loading payment method
description absent, title real

States

cells

The Email field's two props, and the buttons' own states.

Email field

Subscribe to our newsletter

Get the latest posts and product news, once a month.

One email a month, no more.
hint

Subscribe to our newsletter

Get the latest posts and product news, once a month.

Enter a valid email address.
isInvalid: the hint as the error

Action buttons

hover and focus each control
isDisabled on both
isLoading on the primary