Quick Action Modal

Quick action selection modal with multiple action buttons. Perfect for context menus, item actions, and quick operations.

Features

Multiple action buttons with icons
Action variants (primary, secondary, positive, negative)
Auto-closes after action selection
Customizable title and description
Cancel option available
Full-width action buttons

Examples

Basic Actions

File Actions

Usage

import { QuickActionModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const actions = [
    {
      id: 'edit',
      label: 'Edit',
      icon: 'PencilIcon',
      action: 'primary',
      onClick: () => console.log('Edit')
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: 'TrashIcon',
      action: 'negative',
      onClick: () => console.log('Delete')
    }
  ]
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Quick Actions
      </Button>
      
      <QuickActionModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Choose an Action"
        description="Select an action to perform"
        actions={actions}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
title	string	-	Modal title text
description	string	-	Optional modal description
actions	Action[]	-	Array of action objects with id, label, icon, action, and onClick
size	'sm' \| 'md' \| 'lg' \| 'full'	'sm'	Modal size variant