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

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

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

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