Banner
Page and section banners: an announcement with an ember dot, status banners with actions, a sticky system bar, dismiss with height collapse, and an inline error panel with retry and details.
Preview
Invoices
Plan · Team, 12 seats
Couldn’t load invoices
The billing service didn’t answer in time. Your payments are not affected.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "announcement" | "info" | "success" | "warning" | "danger" | "info" | Tone. Warning and danger use role=alert, the rest role=status. |
| layout | "card" | "bar" | "card" | card sits in content; bar spans its container edge to edge. |
| sticky | boolean | false | Bars only. Stick to the top of the scroll container. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / true / — | Visibility. Dismissing collapses the banner's height. |
| onDismiss | () => void | — | Called when the user dismisses. Persist the dismissal here. |
| onRetry | () => unknown | — | ErrorPanel. Return a promise to show the retrying spinner. |
| details | ReactNode | — | ErrorPanel. Technical detail behind a Details disclosure. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.