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.
- Element
-
igc-banner
- 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: boolean = falseDefined in src/components/banner/banner.ts:101
tagName
Section titled "tagName"The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
tagName: "igc-banner" = 'igc-banner'Defined in src/components/banner/banner.ts:61
Methods
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 or the transition was superseded by a newer one.
hide(): Promise<boolean>Defined in src/components/banner/banner.ts:140
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 or the transition was superseded by a newer one.
show(): Promise<boolean>Defined in src/components/banner/banner.ts:130
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>Defined in src/components/banner/banner.ts:150