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.

Constructors

Section titled "Constructors"

IgcBannerComponent 

new IgcBannerComponent(): IgcBannerComponent

Defined in src/components/banner/banner.ts:84

Returns IgcBannerComponent

Properties

Section titled "Properties"

open

Section titled "open"

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 = false

Defined in src/components/banner/banner.ts:82

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/banner/banner.ts:61

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.

MDN Reference

 
tagName: "igc-banner" = 'igc-banner'

Defined in src/components/banner/banner.ts:60

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin< IgcBannerComponentEventMap, Constructor<LitElement> >(LitElement) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: EventEmitterMixin< IgcBannerComponentEventMap, Constructor<LitElement> >(LitElement) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

hide

Section titled "hide"

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>

Defined in src/components/banner/banner.ts:129

Returns Promise<boolean>

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin< IgcBannerComponentEventMap, Constructor<LitElement> >(LitElement) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

show

Section titled "show"

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>

Defined in src/components/banner/banner.ts:114

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:145

Returns Promise<boolean>

register

Section titled "register" 
register(): void

Defined in src/components/banner/banner.ts:64

Returns void

Events

Section titled "Events"

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<void>

Defined in src/components/banner/banner.ts:19

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<void>

Defined in src/components/banner/banner.ts:18