Astryx Alert Dialog

Forms

About

A modal confirmation dialog from Meta's Astryx design system for destructive or high-impact actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Alert Dialog to your project and fits it to your theme.

Code

How Astryx Alert Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import AlertDialog, {
  useImperativeAlertDialog,
} from "@/components/ui/astryx-alert-dialog"

export default function AlertDialogDemo() {
  const alert = useImperativeAlertDialog()

  const alertProps = {
    title: "Delete item?",
    description:
      "This action cannot be undone. The item and all its data will be permanently removed.",
    actionLabel: "Delete",
  } as const

  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{ colorScheme: "light", display: "contents" }}
    >
      <AlertDialog
        isOpen
        isInline
        onOpenChange={() => {}}
        {...alertProps}
        onAction={() =>
          alert.show({ ...alertProps, onAction: () => alert.hide() })
        }
      />
      {alert.element}
    </div>
  )
}