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 {useState} from 'react';
import {AlertDialog} from '@/components/ui/astryx-alert-dialog';

function AlertDialogAsyncAction() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <AlertDialog
      isOpen
      isInline
      onOpenChange={() => {}}
      title="Revoke access?"
      description="This user will immediately lose access to all shared resources."
      actionLabel="Revoke"
      isActionLoading={isLoading}
      onAction={async () => {
        setIsLoading(true);
        await new Promise(r => setTimeout(r, 2000));
        setIsLoading(false);
      }}
    />
  );
}

export default function AlertDialogAsyncActionDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <AlertDialogAsyncAction />
    </div>
  );
}