A snackbar component is used to provide feedback about an operation by showing a brief message at the bottom of the screen.

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-snackbar
Slots
default — Default slot to render the snackbar content.
action — Renders the action part of the snackbar. Usually an interactive element (button).
CSS Parts
base — The base wrapper of the snackbar component.
message — The snackbar message.
action — The default snackbar action button.
action-container — The area holding the actions.

Properties

Section titled "Properties"

Optional actionText

Section titled "actionText"

The text of the action button.

 
actionText: string

Defined in src/components/snackbar/snackbar.ts:56

displayTime

Section titled "displayTime"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Determines the duration in milliseconds in which the component will be visible.

 
displayTime: number = 4000

Defined in src/internals/mixins/alert.ts:36

keepOpen

Section titled "keepOpen"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Determines whether the component should close after the displayTime is over.

 
keepOpen: boolean = false

Defined in src/internals/mixins/alert.ts:45

open

Section titled "open"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Whether the component is in shown state.

 
open: boolean = false

Defined in src/internals/mixins/alert.ts:27

position

Section titled "position"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Sets the position of the component in the viewport.

bottom - positions the component at the bottom. This is the default. middle - positions the component at the center. top - positions the component at the top.

 
position: AbsolutePosition = 'bottom'

Defined in src/internals/mixins/alert.ts:58

positioning

Section titled "positioning"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Sets the positioning strategy of the component.

viewport - positions the component relative to the viewport, ignoring any ancestor elements. This is the default behavior. container - positions the component relative to the nearest visible ancestor. In this mode, the component will be constrained within the bounding box of the ancestor and will be positioned according to the position attribute.

 
positioning: NotificationPositioning = 'viewport'

Defined in src/internals/mixins/alert.ts:70

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-snackbar" = 'igc-snackbar'

Defined in src/components/snackbar/snackbar.ts:43

Methods

Section titled "Methods"

connectedCallback

Section titled "connectedCallback"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

``

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

 
connectedCallback(): void

Defined in src/internals/mixins/alert.ts:88

Returns void

hide

Section titled "hide"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Closes the component.

Returns a promise that resolves to true if the component was successfully closed, or false if it was already closed.

 
hide(): Promise<boolean>

Defined in src/internals/mixins/alert.ts:177

Returns Promise<boolean>

show

Section titled "show"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Opens the component.

Returns a promise that resolves to true if the component was successfully opened, or false if it was already open or could not be shown (e.g., in container positioning mode with no visible ancestors).

 
show(): Promise<boolean>

Defined in src/internals/mixins/alert.ts:167

Returns Promise<boolean>

toggle

Section titled "toggle"

Inherited from: EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent)

Toggles the open state of the component.

Returns a promise that resolves to true if the operation completed successfully, or false if it was already in the desired state.

 
toggle(): Promise<boolean>

Defined in src/internals/mixins/alert.ts:187

Returns Promise<boolean>