---
components: ["ToastNotification"]
---

<script>
  import { ToastNotification } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`ToastNotification` displays non-modal, time-based messages that appear at the top of the screen and automatically disappear. It supports various notification types, custom content, and accessibility features.

See [detailed usage](https://carbondesignsystem.com/components/notification/usage).  
See also: [InlineNotification](InlineNotification)

## Default

Display a basic error notification with title, subtitle, and timestamp by default.

<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />

## Autoclose

Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).

<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />

## Prevent default close behavior

Prevent the default close behavior using `e.preventDefault()` in the `on:close` event handler.

<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
  e.preventDefault();
  // custom close logic (e.g., transitions)
}} />

## Full width

Set `fullWidth` to `true` for the notification to span the full width of its container.

<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />

## Slottable title, subtitle, caption

Customize the notification content using slots for more flexibility.

<ToastNotification>
  <strong slot="title">Error: </strong>
  <strong slot="subtitle">An internal server error occurred.</strong>
  <strong slot="caption">{new Date().toLocaleString()}</strong>
</ToastNotification>

## Accessible icon descriptions

Provide custom descriptions for icons to improve accessibility.

<ToastNotification 
  title="错误"
  subtitle="发生内部服务器错误"
  statusIconDescription="错误图标"
  closeButtonDescription="关闭通知"
/>

## Hidden close button

Create a persistent notification by hiding the close button.

<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

## Notification variants

The component supports different notification types:

<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}"  />
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

## Low contrast

Use low contrast variants for less prominent notifications.

<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
