afv-library/skills/design-systems-slds-apply/assets/blueprints/components/prompt.yaml

name: Prompt
description: A prompt is a modal dialog that asks the user to confirm an action or provide input. It typically contains a
  question or message, along with action buttons for the user to respond.
category: Overlay
slds_classes:
  root: ''
  elements: []
  modifiers: []
  states:
  - class: slds-is-open
    description: Open state for prompt modal
    trigger: When prompt is visible
  - class: slds-is-disabled
    description: Disabled state for prompt actions
    trigger: When prompt actions are not interactive
variants:
- name: Base
  description: Standard prompt modal dialog
  classes: []
  usage_context: Default prompt implementation
  differences: Modal dialog with header, body, and footer sections
lightning_component:
  name: lightning-modal
  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-modal
  mapping_notes: Lightning modal can be configured as a prompt with appropriate content and actions
accessibility:
  keyboard_support:
  - Tab to navigate between focusable elements
  - Shift+Tab to navigate backwards
  - Escape to close the prompt
  - Enter to confirm (when appropriate)
  screen_reader:
  - Prompt title announced
  - Prompt content announced
  - Action buttons announced
  - Close button announced
  aria_attributes:
  - role='dialog' or 'alertdialog' on prompt container
  - aria-labelledby pointing to prompt title
  - aria-describedby pointing to prompt content
  - aria-modal='true' on dialog
  - aria-label on close button
  - Focus trap within modal
usage_guidelines:
  when_to_use:
  - When user confirmation is required before an action
  - For destructive actions that need confirmation
  - When user input is needed in a modal context
  - For important decisions that require user attention
  when_not_to_use:
  - For simple informational messages (use alerts)
  - For non-critical confirmations (use inline confirmations)
  - When action can be easily undone
  - For frequent, repetitive confirmations
  best_practices:
  - Use clear, concise messaging
  - Provide specific action button labels
  - Make destructive actions clearly distinguishable
  - Ensure proper focus management
  - Provide keyboard shortcuts for common actions
  - Use appropriate dialog role (dialog vs alertdialog)
  - Include a way to dismiss (close button or cancel)
  common_mistakes:
  - Overusing prompts for non-critical actions
  - Unclear or vague messaging
  - Missing keyboard navigation
  - Not trapping focus within modal
  - Missing ARIA attributes
  - No way to dismiss the prompt
code_examples:
- title: Basic Prompt
  code: "<div class=\"slds-is-open\" role=\"dialog\" aria-labelledby=\"prompt-title\" aria-describedby=\"prompt-content\"\
    \ aria-modal=\"true\">\n      <div class=\"\">\n        <h2 id=\"prompt-title\" class=\"slds-text-heading_medium\">Confirm\
    \ Action</h2>\n        <button class=\"slds-button slds-button_icon slds-button_icon-small\" aria-label=\"Close\">\n \
    \         <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"\
    ></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"\" id=\"prompt-content\">\n        <p>Are\
    \ you sure you want to perform this action?</p>\n      </div>\n      <div class=\"\">\n        <button class=\"slds-button\
    \ slds-button_neutral\">Cancel</button>\n        <button class=\"slds-button slds-button_brand\">Confirm</button>\n  \
    \    </div>\n      </div>\n"
- title: Destructive Action Prompt
  code: "<div class=\"slds-is-open\" role=\"alertdialog\" aria-labelledby=\"delete-title\" aria-describedby=\"delete-content\"\
    \ aria-modal=\"true\">\n      <div class=\"\">\n        <h2 id=\"delete-title\" class=\"slds-text-heading_medium\">Delete\
    \ Record</h2>\n        <button class=\"slds-button slds-button_icon slds-button_icon-small\" aria-label=\"Close\">\n \
    \         <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n            <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"\
    ></use>\n          </svg>\n        </button>\n      </div>\n      <div class=\"\" id=\"delete-content\">\n        <p>This\
    \ action cannot be undone. Are you sure you want to delete this record?</p>\n      </div>\n      <div class=\"\">\n  \
    \      <button class=\"slds-button slds-button_neutral\">Cancel</button>\n        <button class=\"slds-button slds-button_destructive\"\
    >Delete</button>\n      </div>\n      </div>\n"
styling_hooks: []
dependencies:
  css_files:
  - prompt.css
  - modal.css
  - button.css
  javascript:
  - Modal open/close functionality
  - Focus trap management
  - Backdrop/overlay handling
  - Escape key handling
  icons:
  - utility:close
  other_components:
  - modal
  - button
related_components:
- name: Modal
  relationship: parent
  description: Base modal component that prompt extends
- name: Alert
  relationship: alternative
  description: For non-interactive messages
- name: Popover
  relationship: alternative
  description: For lightweight overlays
references:
  official_docs: https://v1.lightningdesignsystem.com/components/prompt/
  design_guidelines: https://v1.lightningdesignsystem.com/components/prompt/
metadata:
  version: 1.0.0
  last_updated: '2025-11-12'
  author: SLDS Documentation Team
  slds_version: 2.27.2
  review_status: complete
  source: official-slds
  notes: Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Cleaned
    invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.