ToastNotification

Source code
Table of Contents

Usage

Default (error)

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

<ToastNotification />

Hidden close button

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

<ToastNotification
  hideCloseButton
  kind="warning"
  title="Upcoming scheduled maintenance"
/>

Notification variants

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

<ToastNotification kind="error" />
<ToastNotification kind="info" />
<ToastNotification kind="info-square" />
<ToastNotification kind="success" />
<ToastNotification kind="warning" />
<ToastNotification kind="warning-alt" />

Low contrast

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

<ToastNotification lowContrast kind="error" />
<ToastNotification lowContrast kind="info" />
<ToastNotification lowContrast kind="info-square" />
<ToastNotification lowContrast kind="success" />
<ToastNotification lowContrast kind="warning" />
<ToastNotification lowContrast kind="warning-alt" />
Table of Contents