Alert Dialog

Overlays

Alert confirmation dialog.

Installation

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

Import

import { PixelAlertDialog, PixelAlertDialogTrigger, PixelAlertDialogContent, PixelAlertDialogHeader, PixelAlertDialogTitle, PixelAlertDialogDescription, PixelAlertDialogFooter, PixelAlertDialogCancel, PixelAlertDialogAction } from "@/components/ui/pixel-alert-dialog"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-alert-dialog.tsx

"use client";

import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import type * as React from "react";
import { cn } from "@/lib/utils";
import { pixelButtonVariants } from "./pixel-button";

function PixelAlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root {...props} />;
}

function PixelAlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return <AlertDialogPrimitive.Trigger {...props} />;
}

function PixelAlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return <AlertDialogPrimitive.Portal {...props} />;
}

function PixelAlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      className={cn("fixed inset-0 z-50 bg-black/80 duration-0", className)}
      {...props}
    />
  );
}

function PixelAlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <PixelAlertDialogPortal>
      <PixelAlertDialogOverlay />
      <AlertDialogPrimitive.Content
        className={cn(
          "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-4 border-black bg-[#fffacd] dark:bg-[#2a2a2a] p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] duration-0 sm:rounded-none",
          "font-[family-name:var(--font-press-start)]",
          className,
        )}

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.