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

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

The `InlineNotification` component displays contextual messages inline with content. It supports various types of notifications (error, warning, success, info) and can include actions. Use it to provide feedback or important information to users.

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

## Default

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

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

## Prevent default close behavior

The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.

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

## Slottable title and subtitle

Customize the notification content using slots for more flexibility.

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

## Accessible icon descriptions

Make notifications more accessible by providing custom descriptions for icons.

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

## Hidden close button

Create a persistent notification by hiding the close button.

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

## With actions

Add interactive elements to notifications using the actions slot.

<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

The component supports different notification types:

<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

Use low contrast variants for less prominent notifications.

<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." />
