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)

Sets the time in milliseconds that the component stays visible.

 
displayTime: number = 4000

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

keepOpen

Section titled "keepOpen"

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

Keeps the component open 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)

Sets the open state of the component.

 
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.

 
position: AbsolutePosition = 'bottom'

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

positioning

Section titled "positioning"

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

Sets the positioning strategy of the component.

viewport - positions against the viewport, ignoring every ancestor. container - positions inside the bounding box of the closest visible ancestor, at the place that position sets.

 
positioning: NotificationPositioning = 'viewport'

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

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

Returns void

hide

Section titled "hide"

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

Closes the component. Resolves to false when it is already closed.

 
hide(): Promise<boolean>

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

Returns Promise<boolean>

show

Section titled "show"

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

Opens the component. Resolves to false when it is already open, or when container positioning finds no visible ancestor.

 
show(): Promise<boolean>

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

Returns Promise<boolean>

toggle

Section titled "toggle"

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

Toggles the component. Resolves to true when the state changed.

 
toggle(): Promise<boolean>

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

Returns Promise<boolean>