---
components: ["InlineNotification", "NotificationActionButton"]
---

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

Notification that appears inline.

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

## Default (error)

<InlineNotification title="Error:" subtitle="An internal server error occurred." />

## Prevent default close behavior

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

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

## Slottable title, subtitle

<InlineNotification>
  <strong slot="title">Error: </strong>
  <strong slot="subtitle">An internal server error occurred.</strong>
</InlineNotification>

## 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`.

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

## Hidden close button

<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

## With actions

<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
  <svelte:fragment slot="actions">
    <NotificationActionButton>Learn more</NotificationActionButton>
  </svelte:fragment>
</InlineNotification>

## Notification variants

<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification kind="success" title="Success:" subtitle="Your settings have been saved." />
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

## Low contrast

<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="success" title="Success:" subtitle="Your settings have been saved." />
<InlineNotification lowContrast kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />