Confirm

import { Confirm } from 'ui-lab-components/confirm';
import { toast, Toaster } from 'ui-lab-components/toast';
 
export const metadata = {
  title: 'Basic Confirm',
  description: 'A confirmation dialog for critical actions. Use this to prevent accidental deletions or destructive operations.'
};
 
export default function Example() {
  return (
    <>
      <Confirm
        labels={{
          trigger: 'Delete Account',
          confirming: {
            title: 'Are you sure?',
            body: 'This action cannot be undone. All your data will be permanently deleted.',
          },
          confirm: 'Delete',
          cancel: 'Cancel',
        }}
        onConfirm={() => toast({ title: 'Account deleted', variant: 'danger' })}
      />
      <Toaster />
    </>
  );
}
 

import { Confirm } from 'ui-lab-components/confirm';
import { Flex } from 'ui-lab-components/flex';
import { toast, Toaster } from 'ui-lab-components/toast';
 
export const metadata = {
  title: 'Inline Row Confirm',
  description: 'A settings-row delete action. The row label stays put via labels.idle, and the warning copy only appears once the user commits, via labels.confirming.',
};
 
export default function Example() {
  return (
    <>
      <Flex direction="column" gap="lg" className="w-100 rounded-sm p-5">
        <Confirm
          labels={{
            trigger: 'Remove',
            idle: {
              title: 'Two-factor authentication',
              body: 'Adds a second step when signing in.',
            },
            confirming: {
              title: 'Turn off two-factor authentication?',
              body: 'Your account will only be protected by your password.',
            },
            confirm: 'Turn off',
            cancel: 'Keep it on',
          }}
          severity="high"
          onConfirm={() => toast({ title: '2FA disabled', variant: 'warning' })}
        />
 
        <div className="h-px bg-background-700/40" aria-hidden="true" />
 
        <Confirm
          labels={{
            trigger: 'Delete',
            confirming: {
              title: 'Delete this project?',
              body: 'All files and history are removed immediately.',
            },
            confirm: 'Delete',
            cancel: 'Cancel',
          }}
          severity="critical"
          onConfirm={() => toast({ title: 'Project deleted', variant: 'danger' })}
        />
      </Flex>
      <Toaster />
    </>
  );
}
 

import { Confirm } from 'ui-lab-components/confirm';
import { Flex } from 'ui-lab-components/flex';
import { toast, Toaster } from 'ui-lab-components/toast';
 
export const metadata = {
  title: 'Dialog Mode',
  description: 'Same labels API as inline mode, switched to a modal for higher-stakes confirmations. labels.idle labels the row behind the trigger; labels.confirming becomes the dialog heading and body.',
};
 
export default function Example() {
  return (
    <>
      <Flex align-center justify-between gap="xl" className="w-100 rounded-sm p-5">
        <Flex direction="column" gap="xs">
          <span className="text-sm font-medium text-foreground-100">acme-production</span>
          <span className="text-xs text-foreground-300">Deployed 3 hours ago</span>
        </Flex>
 
        <Confirm
          mode="dialog"
          labels={{
            trigger: 'Delete environment',
            confirming: {
              title: 'Delete acme-production?',
              body: 'This permanently removes the environment, its secrets, and deploy history.',
            },
            confirm: 'Delete environment',
            cancel: 'Cancel',
          }}
          destructiveActionWarning="This action cannot be undone."
          requiresReason
          confirmText="acme-production"
          severity="critical"
          onConfirm={() => toast({ title: 'Environment deleted', description: 'acme-production is gone.', variant: 'danger' })}
        />
      </Flex>
      <Toaster />
    </>
  );
}