# Banner

> A full-width strip above a page or the whole app for state that outlives one action: an overdue invoice, a failing integration, a maintenance window.

```ts
import { Banner } from "@sdxc/ui";
```

Renders the strip as a named region: tone icon, message, one action, and a
close form only when `dismiss` is given. One banner at a time; it wraps on a
phone and flows above the app frame, pushing it down.

## Examples

```tsx
<Banner color="warning" label={t("billing.region")} action={<Button href="/billing">{t("billing.update")}</Button>}>
	{t("billing.declined")}
</Banner>
```

```tsx
<Banner label={t("maintenance.region")} dismiss={{ label: t("actions.dismiss"), action: "/banners/dismiss", fields: { id: "maintenance" } }}>
	{t("maintenance.message")}
</Banner>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | Accessible name of the strip's region landmark, such as "Billing". |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Default: `"brand"`. |
| `icon?` | `RemixNode` | Leading icon in place of the tone's own, or `null` for none. |
| `action?` | `RemixNode` | The one fixing action, such as an "Update Payment Method" button or link. |
| `dismiss?` | `Dismiss` | Lets the reader close the strip through a form, so the server records it and stops rendering the banner. Leave it out for state that needs resolving. |
| `children` | `RemixNode` | The message: what is wrong and what fixing it changes, in a sentence or two. |

Also accepts everything in `Omit<TagProps<"section">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone of the strip: warning for billing, danger for a failing integration. |