Promo Banner

Pro

Photo or colour promo card with a title, subtitle and action pill. Once your app marks it done, the pill turns into its result in place, with a check and a new label that stays.

Preview

Installation

npx @lumioui/cli add pro/promo-banner

Usage

import { PromoBanner } from "@/components/ui/promo-banner/promo-banner";
<PromoBanner />

API reference

Prop Type Default
title* string —
eyebrow string

Short kicker above the title, sentence case ("New this week"). Changes swap in place.

 —
subtitle string —
ctaLabel string

CTA pill label. Changes swap in place while the pill springs to the new width.

 —
onCta
(e: GestureResponderEvent) => void … (e: GestureResponderEvent) => void | Promise<unknown>
—
ctaDone boolean

The CTA has done its job: the chevron becomes a drawn check, one sheen crosses the card, and the pill stays as the result (no longer pressable).

 false
icon IconName

Icon tile pinned top-right.

 —
imageUrl string

Photo art instead of a fill; a bottom scrim keeps copy readable.

 —
from string

Gradient colours (hex): deliberate art direction, same in both schemes, copy renders white. Omit both to follow the theme primary (ink by default, or the surrounding <Accent>).

 —
to string —
angle "horizontal" | "vertical" "horizontal"
onPress PressableProps["onPress"]

Whole-card press (e.g. tap-through promos with no inline CTA).

 —
switchOn boolean

Copy and CTA switch on after the card on mount. Default true.

 true
className string —