Staffbase

Components

Alert Dialog

Alert dialogs interrupt the user to confirm a critical or destructive action. Use for actions that cannot be undone.

Stable
GitHub Figma

Anatomy

Anatomy 
import {AlertDialog} from '@staffbase/design';

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Popup>
    <AlertDialog.Icon />
    <AlertDialog.Title />
    <AlertDialog.Description />
    <AlertDialog.Action />
    <AlertDialog.Cancel />
  </AlertDialog.Popup>
</AlertDialog.Root>

API reference

Root

Inherits props fromBase UI Alert Dialog Root

Trigger

Inherits props fromBase UI Alert Dialog Trigger
Name Type Description
children
ReactNode
Opens the dialog when activated. Must be a button element.

Popup

Inherits props fromBase UI Alert Dialog Popup
Name Type Description
container
HTMLElementRefObject<HTMLElement>
Use this instead of z-index to specify another parent element to render the dialog portal into. Default is the document body.

Icon

Name Type Description
children
ReactNode
A wrapper to style the icon to render in the dialog.

Title

Renders an <h2> element.

Name Type Description
children
ReactNode
A heading that labels the dialog.

Description

Renders a <p> element.

Name Type Description
children
ReactNode
Additional information about the action requested by the dialog.