# Promo Banner

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.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/promo-banner
```

## Import

```tsx
import { PromoBanner } from "@/components/ui/promo-banner/promo-banner";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `eyebrow?` | `string` | Short kicker above the title, sentence case ("New this week"). Changes swap in place. |
| `title` | `string` | — |
| `subtitle?` | `string` | — |
| `ctaLabel?` | `string` | CTA pill label. Changes swap in place while the pill springs to the new width. |
| `onCta?` | `(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). |
| `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"` | — |
| `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. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/promo-banner