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

Toasts are non-modal, time-based window elements used to display short messages;
they usually appear at the top of the screen and disappear after a few seconds.

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

## Default (error)

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

## Autoclose

By default, `ToastNotification` does not automatically close.

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

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

## Prevent default close behavior

`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.

<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 containing element.

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

## Slottable title, subtitle, caption

<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

The status icon and close button icon descriptions appear on cursor hover and are read
by assistive technology. Default descriptions are provided in English and can be
overridden via `statusIconDescription` and `closeButtonDescription`.

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

## Hidden close button

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

## Notification variants

<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

<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()}" />
