Notification

A corner panel with a title, a body and its own actions, for something that happened which the reader did not ask about.

Types

Call success, info, warning or error to open a card with the matching status icon and color.

Custom icon

Pass icon a node to replace the status icon, like a trash can for a deleted project.

Without an icon

Call open() without a type for a plain card with a title and a description and no icon.

Shape

Set shape: "squircle" for a card with smooth superellipse corners, the same as Tooltip and Popover.

Duration

Set duration in seconds to change how long the card stays, or 0 to keep it open until someone closes it.

On close

Pass onClose to run code when the card closes, by timeout or by hand, like enabling a button again.

Placement

Set placement on a call to open the card in any of the four corners, or centered at the top or bottom.

Stack

When more than three cards are open they collapse into a stack that expands on hover, and destroy() closes them all.

Update by key

Call again with the same key to update a card in place, like switching it from info to success when a deploy finishes.

Live progress

Pass a Progress bar as the description and update it by key to show an upload moving forward.

Countdown bar

Set showProgress to draw a bar that counts down the duration and pauses while the pointer is over the card.

Rich content

Pass any node as the description, like an avatar with a name, or an Alert inside the card.

Actions

Pass buttons in actions and set duration: 0 so the card stays until the reader picks one.

In context

The component inside real screens, with the components it usually sits beside.

Push message

A message card like a push notification, with the sender's avatar and unread count as the icon, the time in place of close, and a Reply that opens a text box.

Question from an app

A card with an app icon that asks a question, opens its answers as a list on Answer, and updates by key once one is picked.

Suggested task

A card that suggests a task, shows the full brief in a Popover on hover, and starts it from a split button with more options.

Deploy finished

A success card for a finished deploy, with View log and Dismiss buttons that close it by its key.

API Reference

useNotification
useNotification's methods.
NotificationArgs
NotificationArgs's props. Rows marked antuikit in the Version column are added by the kit.
NotificationConfig
NotificationConfig's props.