modal

Confirmation Dialog

Accessible modal for destructive action confirmation.

modal dialog confirmation accessible | Gemini 3.1 Pro

Prompt

# Role
You are a Senior Frontend Developer specializing in accessible UI components and interaction design patterns.

# Objective
Create a reusable confirmation dialog component for destructive actions that is fully accessible, keyboard-navigable, and visually clear about the consequences of the action.

# Instructions
1. Build the dialog using the native `<dialog>` HTML element:
   - Centered on screen with a backdrop blur overlay
   - Smooth entrance animation: fade-in combined with subtle scale-up (0.95 → 1.0)
2. Structure the dialog content as follows:
   - Top: warning triangle icon (SVG) in amber/yellow
   - Title: bold, clear heading describing the action (e.g., "Delete this project?")
   - Description: secondary text explaining consequences
   - Action context: display the name/identifier of the item being affected
3. Add two action buttons at the bottom:
   - Cancel button (secondary/outline style) — closes the dialog with no action
   - Confirm button (danger red, filled) — executes the destructive action
   - Confirm button should be visually dominant but NOT auto-focused (prevent accidental confirmation)
4. Implement keyboard and focus management:
   - Focus trap: Tab key cycles only within the dialog
   - Escape key closes the dialog
   - Set `inert` attribute on background content when dialog is open
5. Add exit animation: fade-out with scale-down on close

# Constraints
- Use the native `<dialog>` element — do not build a custom modal from `<div>`
- No external dependencies — vanilla HTML, CSS, and JavaScript only
- Must pass WCAG 2.1 AA accessibility requirements
- Auto-focus the Cancel button on open (safe default)
- Do not allow background scroll when dialog is open

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include a demo trigger button to open the dialog
- Clean, commented code with clear separation of structure, style, and behavior

Notes

Prompt

Role

You are a Senior Frontend Developer specializing in accessible UI components and interaction design patterns.

Objective

Create a reusable confirmation dialog component for destructive actions that is fully accessible, keyboard-navigable, and visually clear about the consequences of the action.

Instructions

Build the dialog using the native <dialog> HTML element:
- Centered on screen with a backdrop blur overlay
- Smooth entrance animation: fade-in combined with subtle scale-up (0.95 → 1.0)
Structure the dialog content as follows:
- Top: warning triangle icon (SVG) in amber/yellow
- Title: bold, clear heading describing the action (e.g., “Delete this project?”)
- Description: secondary text explaining consequences
- Action context: display the name/identifier of the item being affected
Add two action buttons at the bottom:
- Cancel button (secondary/outline style) — closes the dialog with no action
- Confirm button (danger red, filled) — executes the destructive action
- Confirm button should be visually dominant but NOT auto-focused (prevent accidental confirmation)
Implement keyboard and focus management:
- Focus trap: Tab key cycles only within the dialog
- Escape key closes the dialog
- Set inert attribute on background content when dialog is open
Add exit animation: fade-out with scale-down on close

Constraints

Use the native <dialog> element — do not build a custom modal from <div>
No external dependencies — vanilla HTML, CSS, and JavaScript only
Must pass WCAG 2.1 AA accessibility requirements
Auto-focus the Cancel button on open (safe default)
Do not allow background scroll when dialog is open

Output Format

Single HTML file with embedded <style> and <script> blocks
Include a demo trigger button to open the dialog
Clean, commented code with clear separation of structure, style, and behavior

Notes

Use the native <dialog> element with .showModal() for built-in backdrop and accessibility.
Apply inert on the <main> content behind the dialog to trap focus correctly.
Keep animations under 200ms for a snappy, responsive feel.

Related Prompts

Elegant Login Modal

A slick, centered login modal with social auth.

# Role You are a Senior Security Architect and Full-Stack Engineer specializing in authentication interfaces, secure form design, and polished user experience. # Objective Build an elegant, accessible login modal with email/password authentication, social login options, and a polished dark-mode design suitable for SaaS applications. # Instructions 1. Create a centered modal overlay: - Backdrop with blur effect and dark overlay - Modal card with rounded corners, subtle border, and shadow - Smooth entrance animation (fade + scale) 2. Build the login form: - Email input with icon prefix and validation - Password input with icon prefix and show/hide toggle - "Remember me" checkbox - "Forgot password?" link aligned right - Submit button: full-width, accent color, hover effect 3. Add social authentication options: - Divider with "or continue with" text - Social login buttons: Google, GitHub, Apple (icon + label) - Styled as outline buttons with hover fill effect 4. Include a sign-up prompt: - "Don't have an account? Sign up" text below the form - "Sign up" as an accent-colored link 5. Implement interaction details: - Close button (×) in top-right corner - Close on Escape key or backdrop click - Focus trap within the modal - Auto-focus on email input when modal opens # Constraints - Use Tailwind CSS for all styling — no custom CSS - Semantic HTML with proper `<form>`, `<label>`, and ARIA attributes - Do not include actual authentication logic — UI only - Must be fully keyboard-navigable (Tab, Escape, Enter) - Modal max-width: 420px, centered on all screen sizes - Dark mode only # Output Format - Single HTML file using Tailwind CSS CDN - Include a trigger button to open the modal for demonstration - Well-structured, accessible markup with inline comments - Use placeholder content ready for real integration

modal auth ui

Claude 4.6 Opus