Alert Dialog

Example

A component that displays important dialogs to users.

import { AlertDialog, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger } from "@yummacss/ui";
import { Button } from "@yummacss/ui";

export default function Page() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className="bg-transparent c-p tc-red fw-600">Remove item</AlertDialogTrigger>
      <AlertDialogPopup size="md" className="bs-none">
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
        <hr className="b-px bc-silver-3" />
        <div className="d-f jc-fe g-2">
          <AlertDialogClose>Cancel</AlertDialogClose>
        </div>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

Custom styling

Apply custom styles to the <AlertDialog> component.

import { AlertDialog } from "@yummacss/ui";

<AlertDialog className="...">...</AlertDialog>;

Extend properties

Extend the <AlertDialog> component with the Base UI API.

import { AlertDialog } from "@yummacss/ui";

<AlertDialog {...props}>...</AlertDialog>;