Alert Dialog

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Confirm an action that's hard to undo, such as deleting or discarding. Point Content.initialFocus at the safe cancel button.

Don't label the action with a neutral OK or Yes. Name the specific action instead. Don't treat an outside click as a response. Wait for an explicit choice.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Trigger → Content → Header(Title / Description) + Footer(Cancel / Action)

Keyboard and accessibility

Focus starts on the safe cancel action and stays inside the dialog. Escape acts as cancel.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { AlertDialog, Button } from '@surflane/ui'

<AlertDialog.Root open={open} onOpenChange={setOpen}>
  <AlertDialog.Trigger render={<Button />}>Discard</AlertDialog.Trigger>
  <AlertDialog.Content initialFocus={cancelRef}>
    <AlertDialog.Header>
      <AlertDialog.Title>Discard draft?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Close ref={cancelRef} render={<Button />}>
        Keep draft
      </AlertDialog.Close>
      <Button variant='destructive' onClick={discard}>
        Discard draft
      </Button>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens