A non-modal notification banner that displays important, concise messages requiring user acknowledgement.
The banner slides into view with an animated grow transition and renders inline, pushing the surrounding page content rather than overlaying it.
The component integrates with the
Invoker Commands API:
an Ignite button or a native <button> with command="--show" / "--hide" /
"--toggle" and commandfor pointing to this element will call the
corresponding method declaratively without any JavaScript.
- Slots
-
default— The banner message text content. -
prefix— An icon or illustration rendered to the left of the message. Useful for reinforcing the message type (info, warning, success, etc.). -
actions— Custom action elements rendered in the banner's action area. When provided, replaces the default "OK" dismiss button.
- CSS Parts
-
base— The root wrapper element of the banner. -
spacer— The inner wrapper that controls the spacing around the banner content. -
message— The container that holds the illustration and text content. -
illustration— The container for the prefix slot (icon/illustration). -
content— The container for the default message slot. -
actions— The container for the action buttons slot.
Properties
Section titled "Properties"Whether the banner is open.
Setting this property programmatically will immediately show or hide the
banner without animation and without emitting close events.
Prefer the show(), hide(), and toggle() methods for animated
transitions.
open: booleanMethods
Section titled "Methods"Closes the banner with an animated grow-out transition.
Returns true when the banner was successfully closed, or false if
it was already closed.
hide(): Promise<boolean>Returns Promise<boolean>
Opens the banner with an animated grow-in transition.
Returns true when the banner was successfully opened, or false if
it was already open.
show(): Promise<boolean>Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the banner open or closed depending on its current state.
Equivalent to calling show() when closed and hide() when open.
Returns true when the transition completed successfully.
toggle(): Promise<boolean>Returns Promise<boolean>
Events
Section titled "Events"onClosed
Section titled "onClosed"Emitted after the banner has fully closed and its exit animation has completed.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitted just before the banner closes in response to the default action button being clicked. Cancelable — call
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>