Feedback

Dialog

Dialog modals in UI design are pop-up interfaces that interrupt the main workflow to capture user attention for a specific task or message.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

Default

A regular dialog displays information or options to the user, allowing them to close  it or make a selection without requiring immediate action.

Dialog / React Native

<Dialog>
  <DialogTrigger asChild>
    <Button 
      variant='secondary'
      accessibilityRole="button"
      accessibilityLabel="Edit Profile"
      accessibilityHint="Opens dialog to edit your profile"
    >
      <Text>Edit Profile</Text>
    </Button>
  </DialogTrigger>
  <DialogContent 
    className='sm:max-w-[425px]'
    accessibilityViewIsModal={true}
    accessibilityRole="dialog"
    accessibilityLabel="Edit profile dialog"
    accessibilityLiveRegion="assertive"
    nativeID="profile-dialog"
  >
    <DialogHeader>
      <DialogTitle 
        nativeID="dialog-title"
        accessibilityRole="header"
      >
        Edit profile
      </DialogTitle>
      <DialogDescription
        nativeID="dialog-description"
        accessibilityRole="text"
      >
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button
          accessibilityRole="button"
          accessibilityLabel="I accept"
          accessibilityHint="Accepts changes and closes the dialog"
        >
          <Text>I accept</Text>
        </Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Alert Dialog

An alert dialog prompts the user to take action or acknowledge a message, typically requiring a confirmation or response before proceeding.

Alert Dialog / React Native

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button 
      variant='secondary'
      accessibilityRole="button"
      accessibilityLabel="Show Alert Dialog"
      accessibilityHint="Opens a confirmation dialog about deleting your account"
    >
      <Text>Show Alert Dialog</Text>
    </Button>
  </AlertDialogTrigger>
  <AlertDialogContent
    accessibilityViewIsModal={true}
    accessibilityRole="alertdialog"
    accessibilityLabel="Account deletion confirmation"
    accessibilityLiveRegion="assertive"
    nativeID="alert-dialog"
  >
    <AlertDialogHeader>
      <AlertDialogTitle
        nativeID="alert-dialog-title"
        accessibilityRole="header"
      >
        Are you absolutely sure?
      </AlertDialogTitle>
      <AlertDialogDescription
        nativeID="alert-dialog-description"
        accessibilityRole="text"
      >
        This action cannot be undone. This will permanently delete your account and remove
        your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel
        accessibilityRole="button"
        accessibilityLabel="Cancel"
        accessibilityHint="Cancels account deletion and closes the dialog"
      >
        <Text>Cancel</Text>
      </AlertDialogCancel>
      <AlertDialogAction
        accessibilityRole="button"
        accessibilityLabel="Continue with deletion"
        accessibilityHint="Permanently deletes your account"
        accessibilityState={{ busy: false, disabled: false }}
      >
        <Text>Continue</Text>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Badge

Toast