Banner
Banner shows a notice inside the page: what happened or what to know, in the color of its type, with an optional title, actions and a close button.
Demos
Type
type picks the color role and the icon. default is neutral.
Title
title adds a heading above the message. A banner can also be only a title.
Closable
closable adds a × button. The banner fades and collapses, then unmounts and calls onAfterLeave. Return false (or a promise of false) from onClose to keep it open. Space closable banners with margins rather than gap: the margin collapses with the banner, so the ones below slide up smoothly.
Without icon
showIcon={false} hides the icon.
Custom icon
icon replaces the type’s icon. It takes the type’s color and is sized in em, so an SVG at 1em fills the icon box.
Actions
action puts buttons after the text. When the text needs the room, they wrap under it. Small buttons fit a line of text without making the banner taller.
Borderless
bordered={false} keeps only the background, for banners inside cards or panels that already have an edge.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | default | info | success | warning | error | default | Color role and icon. | Unreleased |
title | ReactNode | undefined | A heading above the message. | Unreleased |
children | ReactNode | undefined | The message. | Unreleased |
action | ReactNode | undefined | Buttons or links after the text; they wrap under it when space runs out. | Unreleased |
showIcon | boolean | true | Shows the icon before the text. | Unreleased |
icon | ReactNode | undefined | Replaces the type’s icon. | Unreleased |
bordered | boolean | true | Shows a border. Falls back to ConfigProvider’s bordered. | Unreleased |
closable | boolean | false | Adds a × button that closes the banner. | Unreleased |
onClose | (event) => boolean | void | Promise<boolean | void> | undefined | Runs when × is clicked. false, or a promise of false, keeps the banner open. | Unreleased |
onAfterLeave | () => void | undefined | Runs after the leave animation, once the banner is gone. | Unreleased |
Banner also accepts native div attributes and a ref (title is the heading, not a tooltip). Error and warning banners have role="alert" and are announced at once; the others have role="status" and wait until the screen reader is idle. Both only announce banners that appear after the page has loaded. Pass role to change it.