SnackbarBanner

Inline alert banners that render in the document flow. Use inside cards, forms, or page sections for contextual feedback — not as a global toast.

Quick start

import { SnackbarBanner } from "mates-ui";

SnackbarBanner({
  variant: "success",
  message: "Profile updated successfully.",
})

All variants

import { html, renderApp } from 'mates';

import { SnackbarBanner, registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => () => html`

<x-col gap="var(--md-space-3)" style="max-width:32rem;width:100%;">

${SnackbarBanner({ variant: "success", message: "Profile updated successfully." })}

${SnackbarBanner({ variant: "error", message: "Failed to connect to server." })}

${SnackbarBanner({ variant: "warning", message: "Storage is 90% full." })}

${SnackbarBanner({ variant: "info", message: "A new version is available." })}

${SnackbarBanner({ variant: "default", message: "Your changes have been saved." })}

</x-col>

renderApp(App, document.getElementById('app'));

With title

import { html, renderApp } from 'mates';

import { SnackbarBanner, registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => () => html`

<x-col gap="var(--md-space-3)" style="max-width:32rem;width:100%;">

${SnackbarBanner({ variant: "success", title: "Payment received", message: "Your subscription has been activated. You now have access to all Pro features." })}

${SnackbarBanner({ variant: "error", title: "Upload failed", message: "The file exceeds the 10 MB size limit. Please compress the file and try again." })}

</x-col>

renderApp(App, document.getElementById('app'));

With action

import { html, renderApp } from 'mates';

import { SnackbarBanner, registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => () => html`

<x-col gap="var(--md-space-3)" style="max-width:32rem;width:100%;">

${SnackbarBanner({ variant: "warning", message: "Your session expires in 5 minutes.", action: { label: "Renew session", onClick: () => {} } })}

${SnackbarBanner({ variant: "info", message: "A new version of the app is available.", action: { label: "Update now", onClick: () => {} } })}

${SnackbarBanner({ variant: "default", message: "Comment deleted.", action: { label: "Undo", onClick: () => {} } })}

</x-col>

renderApp(App, document.getElementById('app'));

Dismissible

import { html, atom, nothing, renderApp } from 'mates';

import { SnackbarBanner, OutlinedButton, registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => {

const d1 = atom(true); const d2 = atom(true); const d3 = atom(true);

return () => html`

<x-col gap="var(--md-space-3)" style="max-width:32rem;width:100%;">

${d1() ? SnackbarBanner({ variant: "success", message: "Changes saved.", dismissible: true, onDismiss: () => d1.set(false) }) : nothing}

${d2() ? SnackbarBanner({ variant: "error", message: "Authentication expired.", dismissible: true, onDismiss: () => d2.set(false) }) : nothing}

${d3() ? SnackbarBanner({ variant: "info", message: "Tip: press Ctrl+K to open the command palette.", dismissible: true, onDismiss: () => d3.set(false) }) : nothing}

${!d1() && !d2() && !d3() ? SnackbarBanner({ variant: "default", message: "All dismissed." }) : nothing}

${OutlinedButton("Reset", { size: "sm", onClick: () => { d1.set(true); d2.set(true); d3.set(true); } })}

</x-col>

};

renderApp(App, document.getElementById('app'));

SnackbarBanner

import { SnackbarBanner } from "mates-ui";

Prop	Type	Default	Description
`action`	`{ label: string; onClick: () => void }`	—	Optional action button rendered below the message.
`attr`	`AttrMap`	—	HTML attributes on the root element.
`classes`	`string \| string[]`	—	Extra root classes — joined and appended after built-in classes.
`data`	`DataAttrMap`	—	Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
`dismissible`	`boolean`	`false`	Render a dismiss × button in the top-right corner.
`dismissLabel`	`string`	`"Dismiss"`	Dismiss button aria-label.
`id`	`string`	—	Root `id` shorthand (`attr.id` wins). Form native-control `id` props are unchanged.
`message`*	`string \| TemplateResult`	—	Main body text of the banner.
`on`	`OnEventMap`	`—`	DOM event handlers on the root element.
`onDismiss`	`() => void`	—	Required when dismissible is true.
`style`	`StyleMap`	`—`	Inline CSS on the root element.
`title`	`string`	—	Optional bold headline rendered above the message.
`variant`	`"default" \| "success" \| "error" \| "warning" \| "info"`	`"default"`	Visual style and icon of the banner.

Caveats

Renders in the document flow — not fixed/absolute. Use inside cards, forms, or page sections.
Each variant automatically renders a matching icon (check, x, triangle, info, bell).
When `title` is provided the `message` renders as a supporting line in muted color.