Skip to Content

Banner

Communicates a prominent system-level message at the top of the screen, regardless of the user’s place in the application.

Usage

This is a dismissable banner.

Sizes

Use the size prop to change the size of the banner.

Banner (sm)
Banner (md)

Variants

Use the variant prop to change the visual style of the Banner.

Banner (info)
Banner (warning)
Banner (error)
Banner (unstyled)

Custom icon

By default, Banner displays an appropriate icon based on the variant prop. You can override this by providing a custom icon using the startContent prop.

A banner with a custom icon
🚀
Or just use an emoji

Hidden icon

You can hide the icon by setting startContent to null.

This banner has no icon

Visibility

Controlled

You can control the banner visibility using the isExpanded and onExpandedChange props.

Dismiss the banner to hide me!

Uncontrolled

You can also set the initial visibility using the defaultExpanded prop. This defaults to true if unset.

Slots

Alert has the following slots:

  • base: The main banner container element
  • content: The content wrapper that contains the startContent and children
  • startContentWrapper: The wrapper around the startContent element
  • childrenWrapper: The wrapper around the children elements
  • dismissButton: The dismiss button element
  • icon: The icon element within startContent (if default icons are used)