InlineNotification

Source code
Table of Contents

Usage

Default (error)

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

<InlineNotification on:close />

Hidden close button

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

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

With actions

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

<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
  <div slot="actions">
    <NotificationActionButton>Learn more</NotificationActionButton>
  </div>
</InlineNotification>

Notification variants

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

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

Low contrast

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

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