An Alert stays in the document flow until your application removes it. It never traps focus, times out or opens over content; use Alert Dialog when the user must decide before continuing.
Severity
Severity
Default density
Compact density
Restart from the initial state
Show the copyable source
The API will be read-only on Sunday, 14 June, from 02:00 to 03:00 UTC.Invoice INV-2048 for $1,240.00 was paid on 3 June.You've used 9.6 GB of 10 GB. Uploads will pause when the limit is reached.The connection to GitHub expired. Reconnect to resume syncing.
The API will be read-only on Sunday, 14 June, from 02:00 to 03:00 UTC.Invoice INV-2048 for $1,240.00 was paid on 3 June.You've used 9.6 GB of 10 GB. Uploads will pause when the limit is reached.The connection to GitHub expired. Reconnect to resume syncing.
<div style="display:grid;gap:var(--tp-space-3);max-inline-size:36rem">
<tp-alert title="Scheduled maintenance">The API will be read-only on Sunday, 14 June, from 02:00 to 03:00 UTC.</tp-alert>
<tp-alert severity="success" title="Payment received">Invoice INV-2048 for $1,240.00 was paid on 3 June.</tp-alert>
<tp-alert severity="warning" title="Storage almost full">You've used 9.6 GB of 10 GB. Uploads will pause when the limit is reached.</tp-alert>
<tp-alert severity="danger" title="Could not sync your changes">The connection to GitHub expired. Reconnect to resume syncing.</tp-alert>
</div>
severity changes color only. Say what happened in the title, such as “Storage almost full”, so the message holds up without color or an icon.
Alert does not insert an English severity prefix into authored content. Supply the appropriate message in the application’s language.
Rich title and actions
Title slot and actions
Default density
Compact density
Restart from the initial state
Show the copyable source
Domain verified acme.com
Teammates who sign up with an @acme.com address now join your workspace automatically.
Manage domains
Domain verified acme.com
Teammates who sign up with an @acme.com address now join your workspace automatically.
Manage domains
<tp-alert severity="success" style="max-inline-size:36rem">
<svg slot="icon" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<span slot="title">Domain verified <tp-badge variant="secondary">acme.com</tp-badge></span>
Teammates who sign up with an @acme.com address now join your workspace automatically.
<tp-button slot="actions" variant="outline" size="sm">Manage domains</tp-button>
</tp-alert>
The title slot replaces the title attribute when you need emphasis, a link or a Badge. The icon slot is decorative and the actions slot holds Buttons whose behavior your application owns. Empty slots take up no space.
Announcements
Live update
Default density
Compact density
Restart from the initial state
Show the copyable source
Export report
Q2 revenue report.csv has been saved to Downloads.
Export report
Q2 revenue report.csv has been saved to Downloads.
announcement defaults to off, which suits alerts that render with the page. Use polite for an alert that appears after a user action, and assertive only for urgent problems.
Actual announcement timing depends on assistive technology; rendering an accessibility role is not a guarantee of spoken output.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionseverityseverityAlertSeverity'informational'The color of the message: success, warning and danger for those outcomes, informational for the rest.titletitlestring''The title as plain text, when the title slot is empty.announcementannouncementAlertAnnouncement'off'Whether assistive technology announces the alert: polite for one that appears after an action, assertive only for urgent problems.
Slots
SlotDescriptioniconA decorative mark before the text, usually an Icon.titleA rich title with emphasis, a link or a Badge; it replaces title.defaultThe description.actionsButtons for what to do next; the application owns their behavior.
CSS parts
PartDescription::part(alert)The message surface, colored by the severity.::part(alert-action)The wrapper of the actions slot, at the end of the message.::part(alert-description)The wrapper of the description in the default slot.::part(alert-mark)The wrapper of the icon slot, before the text.::part(alert-title)The title row, from the title slot or the title text.
Related
Components, widgets and patterns that use this one.