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.

import { ilha } from "ilha";
import { Info, TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <div class="flex w-full max-w-2xl flex-col gap-3">
    <Banner
      icon={<Icon icon={Info} class="size-5" />}
      title="Update available"
      description="A new version is ready to install."
    />
    <Banner
      icon={<Icon icon={TriangleAlert} class="size-5" />}
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
    />
    <Banner
      icon={<Icon icon={TriangleAlert} class="size-5" />}
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    />
  </div>
));

Import

import { Banner } from "areia";

Usage

Update available

A new version is ready to install.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
  />
));

Examples

Variants

Default

Update available

A new version is ready to install.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
  />
));

Alert

Session expiring

Your session will expire in 5 minutes.

import { ilha } from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    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.

import { ilha } from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="error"
    title="Save failed"
    description="We couldn't save your changes. Please try again."
  />
));

With Icon

Review required

Please review your project settings before proceeding.

import { ilha } from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="alert"
    title="Review required"
    description="Please review your project settings before proceeding."
  />
));

With Action

Update available

A new version is ready to install.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Banner, Button, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
    action={
      <Button size="sm" variant="primary">
        Update now
      </Button>
    }
  />
));

With Multiple Actions

Session expiring

Your session will expire in 5 minutes.

import { ilha } from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Button, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
    action={
      <>
        <Button size="sm" variant="ghost">
          Dismiss
        </Button>
        <Button size="sm" variant="secondary">
          Extend session
        </Button>
      </>
    }
  />
));

Custom Content

Use markup in description when the message needs links, emphasis, or other inline content.

Custom content supported

This banner supports custom content with Ilha markup.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Custom content supported"
    description={
      <>
        This banner supports <strong>custom content</strong>{" "}
        with Ilha markup.
      </>
    }
  />
));

API Reference

Prop	Type	Default	Description
`icon`	`unknown`	-	Icon markup rendered before the banner content.
`title`	`unknown`	-	Primary heading text for the banner.
`description`	`unknown`	-	Secondary description displayed below the title.
`action`	`unknown`	-	Action slot rendered at the trailing end of structured banners.
`text`	`unknown`	-	Simple banner content used when `title` and `description` are not provided.
`variant`	`"default" \| "alert" \| "error"`	`"default"`	Visual style of the banner.
`class`	`string`	-	Additional CSS classes merged with the generated classes.
`className`	`string`	-	Alias for `class`.