Banner

A full-width strip above a page or the whole app for state that outlives one action.

Your card ending 4242 was declined. Update it to keep 48 monitors running.

View code

tsx

<Banner
	color="warning"
	label="Billing"
	action={<Button size="sm">Update Payment Method</Button>}
>
	Your card ending 4242 was declined. Update it to keep 48 monitors running.
</Banner>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add banner

Usage

typescript

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

Dismissible

Checks pause for 10 minutes on Sunday at 02:00 UTC.

View code

tsx

<Banner
	label="Maintenance"
	dismiss={{ label: "Dismiss", action: "/banners/dismiss", fields: { id: "maintenance-nov" } }}
>
	Checks pause for 10 minutes on Sunday at 02:00 UTC.
</Banner>

Failing integration

Slack stopped accepting alerts 2 hours ago. Down alerts go to email until you reconnect it.

View code

tsx

<Banner
	color="danger"
	label="Integrations"
	action={<Button size="sm" variant="outline">Reconnect Slack</Button>}
>
	Slack stopped accepting alerts 2 hours ago. Down alerts go to email until you reconnect it.
</Banner>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`label`	`string`	Yes	Accessible name of the strip's region landmark, such as "Billing".
`color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	No	Default: `"brand"`.
`icon`	`RemixNode`	No	Leading icon in place of the tone's own, or `null` for none.
`action`	`RemixNode`	No	The one fixing action, such as an "Update Payment Method" button or link.
`dismiss`	`Dismiss`	No	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`	Yes	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.