Banner

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import InfoIcon from "phosphor-svelte/lib/InfoIcon";
  import WarningIcon from "phosphor-svelte/lib/WarningIcon";
  import WarningCircleIcon from "phosphor-svelte/lib/WarningCircleIcon";
</script>

<div class="w-full space-y-3">
  <Banner title="Update available" description="A new version is ready to install.">
    {#snippet icon()}
      <InfoIcon weight="fill" />
    {/snippet}
  </Banner>

  <Banner
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  >
    {#snippet icon()}
      <WarningIcon weight="fill" />
    {/snippet}
  </Banner>

  <Banner
    variant="error"
    title="Save failed"
    description="We couldn't save your changes. Please try again."
  >
    {#snippet icon()}
      <WarningCircleIcon weight="fill" />
    {/snippet}
  </Banner>

  <Banner
    variant="secondary"
    title="Maintenance scheduled"
    description="This service will be unavailable for 10 minutes."
  >
    {#snippet icon()}
      <InfoIcon weight="fill" />
    {/snippet}
  </Banner>
</div>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import InfoIcon from "phosphor-svelte/lib/InfoIcon";
</script>

<Banner title="Update available" description="A new version is ready to install.">
  {#snippet icon()}
    <InfoIcon weight="fill" />
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import WarningIcon from "phosphor-svelte/lib/WarningIcon";
</script>

<Banner
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
>
  {#snippet icon()}
    <WarningIcon weight="fill" />
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import WarningCircleIcon from "phosphor-svelte/lib/WarningCircleIcon";
</script>

<Banner
  variant="error"
  title="Save failed"
  description="We couldn't save your changes. Please try again."
>
  {#snippet icon()}
    <WarningCircleIcon weight="fill" />
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import InfoIcon from "phosphor-svelte/lib/InfoIcon";
</script>

<Banner
  variant="secondary"
  title="Maintenance scheduled"
  description="This service will be unavailable for 10 minutes."
>
  {#snippet icon()}
    <InfoIcon weight="fill" />
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import WarningIcon from "phosphor-svelte/lib/WarningIcon";
</script>

<Banner
  variant="alert"
  title="Review required"
  description="Please review your billing information before proceeding."
>
  {#snippet icon()}
    <WarningIcon weight="fill" />
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import { Button } from "kumo-svelte/components/button";
  import InfoIcon from "phosphor-svelte/lib/InfoIcon";
  import XIcon from "phosphor-svelte/lib/XIcon";
</script>

<div class="w-full space-y-3">
  <Banner title="Update available" description="A new version is ready to install.">
    {#snippet icon()}
      <InfoIcon weight="fill" />
    {/snippet}

    {#snippet action()}
      <Button size="sm">Update now</Button>
    {/snippet}
  </Banner>

  <Banner title="Update available" description="A new version is ready to install.">
    {#snippet icon()}
      <InfoIcon weight="fill" />
    {/snippet}

    {#snippet action()}
      <Button size="sm" variant="ghost" shape="square" icon={XIcon} aria-label="Dismiss" />
    {/snippet}
  </Banner>
</div>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import { Button } from "kumo-svelte/components/button";
  import WarningIcon from "phosphor-svelte/lib/WarningIcon";
</script>

<Banner
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
>
  {#snippet icon()}
    <WarningIcon weight="fill" />
  {/snippet}

  {#snippet action()}
    <Button size="sm" variant="secondary">Dismiss</Button>
    <Button size="sm">Extend session</Button>
  {/snippet}
</Banner>

<script lang="ts">
  import { Banner } from "kumo-svelte/components/banner";
  import { Text } from "kumo-svelte/components/text";
  import InfoIcon from "phosphor-svelte/lib/InfoIcon";
</script>

<Banner title="Custom content supported">
  {#snippet icon()}
    <InfoIcon weight="fill" />
  {/snippet}

  {#snippet description()}
    <Text class="text-inherit">
      This banner supports <strong>custom content</strong> with Text.
    </Text>
  {/snippet}
</Banner>