---
layout: ~/layouts/MdxDocLayout.astro
title: "Banner"
description: "Displays contextual inline messages for informational, alert, or error states."
sourceFile: "components/banner"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import CodeBlock from "~/components/docs/CodeBlock.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import Heading from "~/components/docs/Heading.astro";
import {
  BannerVariantsDemo,
  BannerDefaultDemo,
  BannerAlertDemo,
  BannerErrorDemo,
  BannerWithIconDemo,
  BannerCustomContentDemo,
} from "~/components/demos/BannerDemo";

{/* Demo */}

<ComponentSection>
  <ComponentExample
    code={`<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
/>
<Banner
  icon={<Warning weight="fill" />}
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
/>
<Banner
  icon={<WarningCircle weight="fill" />}
  variant="error"
  title="Save failed"
  description="We couldn't save your changes. Please try again."
/>`}
  >
    <BannerVariantsDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>
  <Heading level={2}>Installation</Heading>
  <CodeBlock code={`npm install @cloudflare/kumo`} lang="bash" />
</ComponentSection>

{/* Usage */}

<ComponentSection>
  <Heading level={2}>Usage</Heading>
  <CodeBlock
    code={`import { Banner } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      title="Update available"
      description="A new version is ready to install."
    />
  );
}`}
    lang="tsx"
  />
</ComponentSection>

{/* Examples */}

<ComponentSection>
  <Heading level={2}>Examples</Heading>

{/* Variants */}

<Heading level={3}>Variants</Heading>
<h4 class="mb-3 text-base font-medium">Default</h4>
<ComponentExample
  code={`<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
/>`}
>
  <BannerDefaultDemo client:visible />
</ComponentExample>

  <h4 class="mb-3 text-base font-medium">Alert</h4>
  <ComponentExample
    code={`<Banner

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

<BannerAlertDemo client:visible />
</ComponentExample>

  <h4 class="mb-3 text-base font-medium">Error</h4>
  <ComponentExample
    code={`<Banner

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

<BannerErrorDemo client:visible />
</ComponentExample>

{/* With icon */}

<Heading level={3}>With icon</Heading>
<ComponentExample
  code={`<Banner
  icon={<Warning weight="fill" />}
  variant="alert"
  title="Review required"
  description="Please review your billing information before proceeding."
/>`}
>
  <BannerWithIconDemo client:visible />
</ComponentExample>

{/* Custom content */}

  <Heading level={3}>Custom content</Heading>
  <ComponentExample
    code={`<Banner
  icon={<Info weight="fill" />}
  title="Custom content supported"
  description={
    <Text DANGEROUS_className="text-inherit">
      This banner supports <strong>custom content</strong> with Text.
    </Text>
  }
/>`}
  >
    <BannerCustomContentDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <PropsTable component="Banner" />
</ComponentSection>
