SuikunUIPre-Alpha

Components > Alert Dialog

Alert Dialog

A floating window that appears over the UI. It can be used to display a message and require an immediate response from the user.

MDN dialog, Radix UI Alert Dialog

import React from 'react'
import { AlertDialog } from '@components/ui/AlertDialog';
() => {

  return (

    <AlertDialog.Root>

      <AlertDialog.Trigger kind="danger">

        Delete Account

      </AlertDialog.Trigger>

      <AlertDialog.Portal>

        <AlertDialog.Content>

          <AlertDialog.Title>

            Delete Account

          </AlertDialog.Title>

          <AlertDialog.Description>

            Are you sure you want to delete this account? This action is permanent and irreversible.

          </AlertDialog.Description>

          <AlertDialog.Footer>

            <AlertDialog.Cancel>

              Cancel

            </AlertDialog.Cancel>

            <AlertDialog.Action kind="danger">

              Delete

            </AlertDialog.Action>

          </AlertDialog.Footer>

        </AlertDialog.Content>

      </AlertDialog.Portal>

    </AlertDialog.Root>

  );

};

Installation

Install Radix UI's Alert Dialog:

yarn add @radix-ui/react-alert-dialog


# or
npm install @radix-ui/react-alert-dialog

Copy and paste this Text primitive at components/ui/Text.tsx.

Copy and paste this Button primitive at components/ui/Button.tsx.

Copy and paste this AlertDialog primitive at components/ui/AlertDialog.tsx.

Anatomy

How to use all the parts together:

import { Dialog } from '@components/ui/Dialog';


export default () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger />


    <AlertDialog.Portal>
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Footer>
          <AlertDialog.Cancel />
          <AlertDialog.Action />
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

Usage

Basic Usage of AlertDialog:

import { AlertDialog } from '@components/ui/AlertDialog';
<AlertDialog.Root>
  <AlertDialog.Trigger kind="danger">
    Delete Account
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Content>
      <AlertDialog.Title>
        Delete Account
      </AlertDialog.Title>


      <AlertDialog.Description>
        Are you sure you want to delete this account? This action is permanent and irreversible.
      </AlertDialog.Description>


      <AlertDialog.Footer>
        <AlertDialog.Cancel>
          Cancel
        </AlertDialog.Cancel>
        <AlertDialog.Action kind="danger">
          Delete
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>