Alert Stack

create()

Creates an item and adds it to the stack.
Returns a function that dismisses and removes the item.

export type ItemOptions = {
  // The id of the item.
  id?: string;

  // The severity of the item.
  // Default: "info"
  severity?: Severity;

  // The title of the item.
  // Default: severity.toUpperCase()
  title?: string;

  // The message of the item.
  // Default: ""
  description?: string;

  // The time before auto dismissing the item in milliseconds. Use `-1` to disable auto dismiss.
  // Default: -1
  duration?: number;

  // Whether this item can be dismissed with a swipe gesture.
  // Default: true
  swipeToDismiss?: boolean;

  // Whether to show an action button.
  // Use `null` to remove the action button.
  actionButton?: null | {
    // The text of the action button.
    // Default: "Dismiss"
    label?: string;

    // The click event handler.
    // Default: dismiss the item
    action?: (event: MouseEvent) => void;
  };

  // Optional function to provide a custom icon element.
  //
  // If provided, this function receives the item's `severity` and
  // should return an `HTMLElement` to replace the default severity icon.
  //
  // Allows full customization of the icon, including animated or complex elements.
  iconOverride?: (severity: Severity) => HTMLElement;
};

Type (options?: ItemOptions) => DismissItem

items

All item elements within the container.

Type HTMLLIElement[]Readonly

maxExpandedItems

The number of items shown when the stack is expanded.

A hidden item with keyboard focus is temporarily brought to the front, then returned when focus leaves it.

Type numberDefault 3

maxItems

The maximum number of items allowed in the stack.

When this limit is exceeded, the oldest item is removed.

Type numberDefault 5

swipeDismiss

Whether items can be dismissed by swiping them horizontally.

Type booleanDefault false

shortcut

Keyboard shortcut used to focus and expand the stack.

The shortcut is written as a + separated string, such as "Alt+T" or "Alt+Shift+T".

Type stringSetter Type string | null

"top"

Positions the stack at the top of the page

Type boolean

"bottom"

Has no effect because the stack is positioned at the bottom by default

Type boolean

"start"

Positions the stack on the start side of the screen (left in LTR, right in RTL)

Type boolean

"center"

Positions the stack in the center of the screen

Type boolean

"end"

Has no effect because the stack is positioned on the end side by default (right in LTR, left in RTL)

Type boolean

"max-items"

The maximum number of items allowed in the stack.

When this limit is exceeded, the oldest item is removed.

Type numberDefault 5

"max-expanded-items"

The number of items shown when the stack is expanded.

A hidden item with keyboard focus is temporarily brought to the front, then returned when focus leaves it.

Type numberDefault 3

"shortcut"

Keyboard shortcut used to focus and expand the stack.

The shortcut is written as a + separated string, such as "Alt+T" or "Alt+Shift+T".

Type string

"swipe-dismiss"

Whether items can be dismissed by swiping them horizontally.

Type boolean

dismissed

Fired when the user dismisses an alert using its action button or a swipe, before it is removed. Cancel it to keep the alert.

Type CustomEvent<HTMLElement>Detail The alert card element that was dismissed.Cancelable

itemschange

Fired when an alert is added or removed. A removed alert is gone from items right away, even while it is still visible.

Type CustomEvent<{ change: "added" | "removed"; item: HTMLElement; }>Detail change is "added" or "removed", and item is the alert.