Inline status message. Never block interaction — banners are always dismissible or auto-dismiss after their context resolves.
New season starts 1 March
Match results will be visible once the first fixture is played.
Licence activated
Your 2026 licence is valid until 31 December.
Profile incomplete
Add your date of birth before 15 January to compete in your age class.
Payment failed
Your last renewal attempt was declined. Update your card to keep your licence active.
tsx · view.tsx
import { Banner } from '@petanque-life/shared';
<Banner tone="warning" title="Profile incomplete" onDismiss={hide}>
Add your date of birth before 15 January to compete in your age class.
</Banner>API
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "danger" | "info" | Visual + semantic role. Drives ARIA role (<code>status</code> / <code>alert</code>). |
| title | string | — | Short headline. |
| children | ReactNode | — | Body copy — keep under two sentences. |
| onDismiss | () => void | — | When set, a close button appears. |
| icon | ReactNode | "automatic" | Override the leading icon. Automatic icon is tone-aware. |