AlertDialog

AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.

install	`yarn add @react-spectrum/dialog`
version	3.0.0-alpha.1
usage	`import {AlertDialog, DialogTrigger} from '@react-spectrum/dialog'`

View guidelines

Spectrum

Example#

<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    title="Low Disk Space"
    variant="warning"
    primaryActionLabel="Confirm">
    You are running low on disk space.
    Delete unnecessary files to free up space.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    title="Low Disk Space"
    variant="warning"
    primaryActionLabel="Confirm">
    You are running low on disk space.
    Delete unnecessary files to free up space.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Save
  </ActionButton>
  <AlertDialog
    title="Low Disk Space"
    variant="warning"
    primaryActionLabel="Confirm">
    You are running low
    on disk space.
    Delete unnecessary
    files to free up
    space.
  </AlertDialog>
</DialogTrigger>

Content#

Unlike Dialog, the layout in AlertDialog is very deliberate. The body of an AlertDialog can be provided by passing children to the component. The AlertDialog also supports having up to three buttons in its footer: a primary button, a secondary button, and a cancel button. Each button can be rendered by providing a string to the primaryActionLabel, secondaryActionLabel, and cancelLabel respectively. Be sure to localize any strings provided to the AlertDialog and to the button labels as well.

ActionDialogs should always have a visible title, specified by passing a string as the title prop. This string should be localized so that the ActionDialog is properly internationalized.

<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="information"
    title="Register profile"
    primaryActionLabel="Register"
    secondaryActionLabel="Remind me later"
    cancelLabel="Cancel">
    You have not saved your profile information
    for this account. Would you like to register now?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="information"
    title="Register profile"
    primaryActionLabel="Register"
    secondaryActionLabel="Remind me later"
    cancelLabel="Cancel">
    You have not saved your profile information
    for this account. Would you like to register now?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Exit
  </ActionButton>
  <AlertDialog
    variant="information"
    title="Register profile"
    primaryActionLabel="Register"
    secondaryActionLabel="Remind me later"
    cancelLabel="Cancel">
    You have not saved
    your profile
    information for
    this account. Would
    you like to
    register now?
  </AlertDialog>
</DialogTrigger>

Accessibility#

If any of the buttons in the ActionDialog's footer should be focused on render, specify which one via the autoFocusButton prop.

<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Save file"
    primaryActionLabel="Save"
    cancelLabel="Cancel"
    autoFocusButton="primary">
    A file with the same name already exists. Overwrite?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Save file"
    primaryActionLabel="Save"
    cancelLabel="Cancel"
    autoFocusButton="primary">
    A file with the same name already exists. Overwrite?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Save
  </ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Save file"
    primaryActionLabel="Save"
    cancelLabel="Cancel"
    autoFocusButton="primary">
    A file with the
    same name already
    exists. Overwrite?
  </AlertDialog>
</DialogTrigger>

Events#

AlertDialog accepts an onPrimaryAction, onSecondaryAction and onCancel prop, triggered when the AlertDialog's confirm or cancel buttons are pressed respectively.

The example below uses onPrimaryAction, onSecondaryAction and onCancel to tell the user which button was pressed to close the AlertDialog.

function Example() {
  let onPrimaryAction = () => alert('Primary button pressed.');
  let onSecondaryAction = () => alert('Secondary button pressed.');
  let alertCancel = () => alert('Cancel button pressed.');

  return (
    <DialogTrigger>
      <ActionButton>
        Publish
      </ActionButton>
      <AlertDialog
        variant="confirmation"
        title="Confirm Publish"
        primaryActionLabel="Publish"
        secondaryActionLabel="Save as draft"
        cancelLabel="Cancel"
        onCancel={alertCancel}
        onPrimaryAction={onPrimaryAction}
        onSecondaryAction={onSecondaryAction}>
        Are you sure you want to publish this document?
      </AlertDialog>
    </DialogTrigger>
  );
}

function Example() {
  let onPrimaryAction = () =>
    alert('Primary button pressed.');
  let onSecondaryAction = () =>
    alert('Secondary button pressed.');
  let alertCancel = () => alert('Cancel button pressed.');

  return (
    <DialogTrigger>
      <ActionButton>Publish</ActionButton>
      <AlertDialog
        variant="confirmation"
        title="Confirm Publish"
        primaryActionLabel="Publish"
        secondaryActionLabel="Save as draft"
        cancelLabel="Cancel"
        onCancel={alertCancel}
        onPrimaryAction={onPrimaryAction}
        onSecondaryAction={onSecondaryAction}>
        Are you sure you want to publish this document?
      </AlertDialog>
    </DialogTrigger>
  );
}

function Example() {
  let onPrimaryAction = () =>
    alert(
      'Primary button pressed.'
    );
  let onSecondaryAction = () =>
    alert(
      'Secondary button pressed.'
    );
  let alertCancel = () =>
    alert(
      'Cancel button pressed.'
    );

  return (
    <DialogTrigger>
      <ActionButton>
        Publish
      </ActionButton>
      <AlertDialog
        variant="confirmation"
        title="Confirm Publish"
        primaryActionLabel="Publish"
        secondaryActionLabel="Save as draft"
        cancelLabel="Cancel"
        onCancel={
          alertCancel
        }
        onPrimaryAction={
          onPrimaryAction
        }
        onSecondaryAction={
          onSecondaryAction
        }>
        Are you sure you
        want to publish
        this document?
      </AlertDialog>
    </DialogTrigger>
  );
}

Props#

Name	Type	Default	Description
`variant`	`'confirmation' \| 'information' \| 'destructive' \| 'error' \| 'warning'`	—	The visual style of the AlertDialog.
`title`	`string`	—	The title of the AlertDialog.
`children`	`ReactNode`	—	The contents of the AlertDialog.
`cancelLabel`	`string`	—	The label to display within the cancel button.
`primaryActionLabel`	`string`	—	The label to display within the confirm button.
`secondaryActionLabel`	`string`	—	The label to display within the secondary button.
`isPrimaryActionDisabled`	`boolean`	—	Whether the primary button is disabled.
`isSecondaryActionDisabled`	`boolean`	—	Whether the secondary button is disabled.
`autoFocusButton`	`'cancel' \| 'primary' \| 'secondary'`	—	Button to focus by default upon render.
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—

Events

Name	Type	Default	Description
`onCancel`	`( ( )) => void`	—	Handler that is called when the cancel button is pressed.
`onPrimaryAction`	`( ( )) => void`	—	Handler that is called when the primary button is pressed.
`onSecondaryAction`	`( ( )) => void`	—	Handler that is called when the secondary button is pressed.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`id`	`string`	—

Visual options#

Variant#

View guidelines

Confirmation

<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Exit instance?"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    Exit dungeon instance and return to main hub?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Exit instance?"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    Exit dungeon instance and return to main hub?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Exit
  </ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Exit instance?"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    Exit dungeon
    instance and return
    to main hub?
  </AlertDialog>
</DialogTrigger>

Information

<DialogTrigger>
  <ActionButton>New file</ActionButton>
  <AlertDialog
    variant="information"
    title="Connect your account"
    primaryActionLabel="Continue"
    cancelLabel="Cancel">
    Please connect an existing account to sync any new files.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>New file</ActionButton>
  <AlertDialog
    variant="information"
    title="Connect your account"
    primaryActionLabel="Continue"
    cancelLabel="Cancel">
    Please connect an existing account to sync any new
    files.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    New file
  </ActionButton>
  <AlertDialog
    variant="information"
    title="Connect your account"
    primaryActionLabel="Continue"
    cancelLabel="Cancel">
    Please connect an
    existing account to
    sync any new files.
  </AlertDialog>
</DialogTrigger>

Destructive

<DialogTrigger>
  <ActionButton>Delete</ActionButton>
  <AlertDialog
    variant="destructive"
    title="Delete file"
    primaryActionLabel="Delete"
    cancelLabel="Cancel">
    This will permanently delete the selected file. Continue?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Delete</ActionButton>
  <AlertDialog
    variant="destructive"
    title="Delete file"
    primaryActionLabel="Delete"
    cancelLabel="Cancel">
    This will permanently delete the selected file.
    Continue?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Delete
  </ActionButton>
  <AlertDialog
    variant="destructive"
    title="Delete file"
    primaryActionLabel="Delete"
    cancelLabel="Cancel">
    This will
    permanently delete
    the selected file.
    Continue?
  </AlertDialog>
</DialogTrigger>

Error

<DialogTrigger>
  <ActionButton>Login</ActionButton>
  <AlertDialog
    variant="error"
    title="Unable to connect"
    primaryActionLabel="Retry"
    cancelLabel="Cancel">
    Something went wrong while connecting to the server.
    Please try again in a couple minutes.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Login</ActionButton>
  <AlertDialog
    variant="error"
    title="Unable to connect"
    primaryActionLabel="Retry"
    cancelLabel="Cancel">
    Something went wrong while connecting to the server.
    Please try again in a couple minutes.
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Login
  </ActionButton>
  <AlertDialog
    variant="error"
    title="Unable to connect"
    primaryActionLabel="Retry"
    cancelLabel="Cancel">
    Something went
    wrong while
    connecting to the
    server. Please try
    again in a couple
    minutes.
  </AlertDialog>
</DialogTrigger>

Warning

<DialogTrigger>
  <ActionButton>Enter</ActionButton>
  <AlertDialog
    variant="warning"
    title="Raid instance"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    The following encounter meant for parties of 4 or more. Enter anyways?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Enter</ActionButton>
  <AlertDialog
    variant="warning"
    title="Raid instance"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    The following encounter meant for parties of 4 or
    more. Enter anyways?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Enter
  </ActionButton>
  <AlertDialog
    variant="warning"
    title="Raid instance"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    The following
    encounter meant for
    parties of 4 or
    more. Enter
    anyways?
  </AlertDialog>
</DialogTrigger>

Primary action disabled#

Disables the primary button.

<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isPrimaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isPrimaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Upgrade
  </ActionButton>
  <AlertDialog
    isPrimaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    cancelLabel="Cancel">
    Upgrade
    subscription for an
    additional $14.99 a
    month?
  </AlertDialog>
</DialogTrigger>

Secondary action disabled#

Disables the secondary button.

<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isSecondaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    secondaryActionLabel="Apply Coupon"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isSecondaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    secondaryActionLabel="Apply Coupon"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>

<DialogTrigger>
  <ActionButton>
    Upgrade
  </ActionButton>
  <AlertDialog
    isSecondaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    secondaryActionLabel="Apply Coupon"
    cancelLabel="Cancel">
    Upgrade
    subscription for an
    additional $14.99 a
    month?
  </AlertDialog>
</DialogTrigger>

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number