Banner
kumo-svelte

Banner

Displays contextual inline messages for informational, alert, or error states.

Update available

A new version is ready to install.

Session expiring

Your session will expire in 5 minutes.

Save failed

We couldn't save your changes. Please try again.

Maintenance scheduled

This service will be unavailable for 10 minutes.

<script lang="ts">
  import { Banner } from '$lib';
  import { Info, Warning, WarningCircle } from 'phosphor-svelte';
</script>

<div class="w-full space-y-3">
  <Banner icon={Info} title="Update available" description="A new version is ready to install." />
  <Banner
    icon={Warning}
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  />
  <Banner
    icon={WarningCircle}
    variant="error"
    title="Save failed"
    description="We couldn't save your changes. Please try again."
  />
  <Banner
    icon={Info}
    variant="secondary"
    title="Maintenance scheduled"
    description="This service will be unavailable for 10 minutes."
  />
</div>

Installation

Barrel

import { Banner } from 'kumo-svelte';

Granular

import { Banner } from 'kumo-svelte/components/banner';

Usage

<script lang="ts">import { Banner } from "kumo-svelte";import { Info } from "phosphor-svelte";</script><Banner  icon={Info}  title="Update available"  description="A new version is ready to install."/>

Examples

Variants

Default

Update available

A new version is ready to install.

<script lang="ts">
  import { Banner } from '$lib';
  import { Info } from 'phosphor-svelte';
</script>

<Banner icon={Info} title="Update available" description="A new version is ready to install." />

Alert

Session expiring

Your session will expire in 5 minutes.

<script lang="ts">
  import { Banner } from '$lib';
  import { Warning } from 'phosphor-svelte';
</script>

<Banner
  icon={Warning}
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
/>

Error

Save failed

We couldn't save your changes. Please try again.

<script lang="ts">
  import { Banner } from '$lib';
  import { WarningCircle } from 'phosphor-svelte';
</script>

<Banner
  icon={WarningCircle}
  variant="error"
  title="Save failed"
  description="We couldn't save your changes. Please try again."
/>

Secondary

Maintenance scheduled

This service will be unavailable for 10 minutes.

<script lang="ts">
  import { Banner } from '$lib';
  import { Info } from 'phosphor-svelte';
</script>

<Banner
  icon={Info}
  variant="secondary"
  title="Maintenance scheduled"
  description="This service will be unavailable for 10 minutes."
/>

With icon

Review required

Please review your billing information before proceeding.

<script lang="ts">
  import { Banner } from '$lib';
  import { Warning } from 'phosphor-svelte';
</script>

<Banner
  icon={Warning}
  variant="alert"
  title="Review required"
  description="Please review your billing information before proceeding."
/>

With action

Update available

A new version is ready to install.

Update available

A new version is ready to install.

<script lang="ts">
  import { Banner, Button } from '$lib';
  import { Info, X } from 'phosphor-svelte';
</script>

<div class="w-full space-y-3">
  <Banner icon={Info} title="Update available" description="A new version is ready to install.">
    {#snippet action()}
      <Button size="sm" variant="primary">Update now</Button>
    {/snippet}
  </Banner>
  <Banner icon={Info} title="Update available" description="A new version is ready to install.">
    {#snippet action()}
      <Button size="sm" variant="ghost" shape="square" aria-label="Dismiss">
        <X class="size-4" />
      </Button>
    {/snippet}
  </Banner>
</div>

With multiple actions

Session expiring

Your session will expire in 5 minutes.

<script lang="ts">
  import { Banner, Button } from '$lib';
  import { Warning } from 'phosphor-svelte';
</script>

<Banner
  icon={Warning}
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
>
  {#snippet action()}
    <Button size="sm" variant="secondary">Dismiss</Button>
    <Button size="sm">Extend session</Button>
  {/snippet}
</Banner>

Custom content

Custom content supported

This banner supports custom content with Text.

<script lang="ts">
  import { Banner, Text } from '$lib';
  import { Info } from 'phosphor-svelte';
</script>

<Banner icon={Info} title="Custom content supported">
  {#snippet description()}
    <Text DANGEROUS_className="text-inherit">
      This banner supports <strong>custom content</strong> with Text.
    </Text>
  {/snippet}
</Banner>

API Reference

PropTypeDefaultDescription
icon Component-Icon rendered before the banner content.
title string-Primary heading text for the banner.
description string | Snippet-Secondary description content displayed below the title.
action Snippet-Action snippet rendered at the trailing end in structured mode.
text string-Deprecated simple banner text. Prefer title and description.
children Snippet-Deprecated simple banner content. Prefer title and description.
variant 'default' | 'alert' | 'error'"default"Visual style of the banner.
class string-Additional classes merged onto the root element.