Alert
Material Design 3-styled alert web component (lit-material-alert) — a persistent inline/page-level banner, distinct from the snackbar toast.
- 2.5 KB gzipped
- @lit-material/alert 0.0.5
- Renders on the server
Example
Alert
A persistent inline/page-level banner — distinct from the snackbar toast.
Markup
<lit-material-alert variant="info"> <span slot="title">Heads up</span> Something worth your attention just happened. </lit-material-alert>
Variants
Install
npm install @lit-material/alert @lit-material/tokensimport "@lit-material/alert";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-alert>
A persistent inline/page-level banner — distinct from
lit-material-snackbar, which is a transient, Popover-API-based toast
that shows up temporarily and floats above content. An alert is a normal
part of the page layout: it stays until the user dismisses it (or the
consumer removes it), and never auto-dismisses on its own.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | AlertVariant | "info" | |
dismissible | dismissible | boolean | false |
Events
| Event | Description |
|---|---|
close | Fires when dismissed via the close button. Not cancelable — see dismiss(). |
Slots
| Slot | Description |
|---|---|
icon | Overrides the variant's default icon. |
title | Optional heading, above the description. Slot exactly one element. |
| default | The alert's description/body text. |
action | Optional action buttons/links. For more than one, wrap them in a single element yourself so they end up in one row. |
CSS parts
| Part | Description |
|---|---|
alert | The banner (background, padding, shape). |
icon | The icon container. |
body | The title/description/action container. |
close | The dismiss button. Only rendered when dismissible. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-alert-shape | Corner radius (default --md-sys-shape-corner-small). |