Class IgcBannerComponent

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.

igc-banner

igcClosing - Emitted just before the banner closes in response to the default action button being clicked. Cancelable — call event.preventDefault() to abort the closing sequence.

igcClosed - Emitted after the banner has fully closed and its exit animation has completed.

  • 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.

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.

Hierarchy

Hierarchy

Constructors

Properties

open: boolean = false

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

false
styles: CSSResult[] = ...
tagName: "igc-banner" = 'igc-banner'

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

Methods

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | AddEventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Closes the banner with an animated grow-out transition.

    Returns true when the banner was successfully closed, or false if it was already closed.

    Returns Promise<boolean>

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | EventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | EventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | EventListenerOptions

    Returns void

  • Opens the banner with an animated grow-in transition.

    Returns true when the banner was successfully opened, or false if it was already open.

    Returns Promise<boolean>

  • 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.

    Returns Promise<boolean>