Shared assets
Banner
Announcement, cookie, newsletter and promo banners. Figma: Type (single action, dual action, slim, text field, countdown) × Theme (default, brand) × Size (floating, full-width), responsive for Desktop and Mobile, optional Icon.
import
{ Banner } from "@pepulux/ui"Theme: Default — floating
We've just announced our Series A!Read about how we got here.
We use third-party cookies in order to personalise your experienceRead our Cookie Policy.
Stay up to date with the latest news and updatesBe the first to hear about new components, updates and design resources.
We've just launched a new feature!Check out the new dashboard.
20% off PRO ends soon!Grab it before the timer runs out.
04Hrs32Min18Sec
Theme: Brand — floating
We've just announced our Series A!Read about how we got here.
We use third-party cookies in order to personalise your experienceRead our Cookie Policy.
Stay up to date with the latest news and updatesBe the first to hear about new components, updates and design resources.
We've just launched a new feature!Check out the new dashboard.
20% off PRO ends soon!Grab it before the timer runs out.
04Hrs32Min18Sec
Size: Full-width
Edge-to-edge strip with a bottom border, used at the top of a page.
We've just launched a new feature!Check out the new dashboard.
We've just announced our Series A!Read about how we got here.
Icon and dismiss
icon accepts true (default glyph), a node, or false. onClose shows the dismiss button.
Launch week is hereNew features every day.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single-action" | "dual-action" | "slim" | "text-field" | "countdown" | "single-action" | Figma Type |
| theme | "default" | "brand" | "default" | Figma Theme |
| size | "floating" | "full-width" | "floating" | Rounded card with shadow, or edge-to-edge strip |
| title / description* | ReactNode | — | Banner copy |
| icon | boolean | ReactNode | true | Figma Icon — leading icon box (not shown on slim / countdown) |
| primaryAction / secondaryAction | { label; onClick?; href? } | — | Buttons (secondary only for dual-action) |
| placeholder / onSubmit | string / (email) => void | — | text-field type |
| countdown | { hours; minutes; seconds } | — | countdown type |
| onClose | () => void | — | Shows the dismiss (x) button |