Alert

An Alert is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.

Composed Components

A Alert uses the following components:

Usage

Default

An alert must have a heading, some content and a primary button label.

Secondary button

An alert can have a secondary button.

Cancel button

An alert can have a cancel button.

Disabled buttons

An alert primary and secondary buttons can be disabled.

Confirmation

Use a confirmation alert when a non-destructive action is required from a user.

Destructive

Use a destructive alert to confirm a permanent change, like deleting data.

Not Dismissable

An alert can be undismissable.

Controlled

The open state can be handled in controlled mode.

Pending

An alert can show a pending state. This is useful when you want to show that an action is in progress.

Sizes

A Alert can be small or medium. The default size is medium.

Responsive sizes

A Alert can have different size in mobile and desktop view.

Props

Alert

autoFocusButton?

The button to focus by default when the alert open.

cancelButtonLabel?

The cancel button label.

isDismissable?

Whether or not the dialog should close on outside interactions.

Defaults to true.
primaryButtonDisabled?

Whether or not the primary button is disabled.

primaryButtonLabel

The primary button label.

secondaryButtonDisabled?

Whether or not the secondary button is disabled.

secondaryButtonLabel?

The secondary button label.

variant?

The visual style of the Alert.

Defaults to confirmation.
size?

The size of the Alert.

Defaults to md.
overlayProps?

Additional props to render on the wrapper element.

isLoading?

Whether or not the Alert is loading.

style?

The inline style for the element.

children?

Children of the dialog. A function may be provided to access a function to close the dialog.

className?

The CSS className for the element.

AlertTrigger

isOpen?

Whether the overlay is open by default (controlled).

defaultOpen?

Whether the overlay is open by default (uncontrolled).

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • dismissable has been renamed isDismissable.
  • wrapperProps has been renamed overlayProps.
  • onClose has been removed.