TaskFlow | Design Guide

Modal Dialogs and Drawers

Modal dialogs and drawer components for overlaying content, forms, and actions. Includes various sizes, positions, and interaction patterns with proper focus management and accessibility.

Components in this section:

Basic Modal Dialog Modal Sizes Confirmation Modal Form Modal Right Drawer Left Drawer Bottom Drawer Overlay Variants

Basic Modal Dialog

Standard modal dialog with header, content area, and action buttons. Centers in viewport with backdrop overlay.

Basic Modal

Confirmation Modal

Specialized modals for user confirmations with clear actions and appropriate visual cues.

Confirmation Types

Form Modal

Modal dialogs specifically designed for forms with proper validation states and user interaction patterns.

Create New Task

Right Drawer

Side panel that slides in from the right edge. Ideal for details, settings, or supplementary content.

Right Side Drawer

Left Drawer

Side panel that slides in from the left edge. Often used for navigation menus or filters.

Left Side Drawer

Bottom Drawer

Panel that slides up from the bottom edge. Great for mobile interfaces and quick actions.

Bottom Drawer

Usage Guidelines

Modal Best Practices

  • Use modals sparingly: Only for critical actions or when context switching is necessary
  • Provide clear exit options: Always include close button, backdrop click, and ESC key support
  • Focus management: Focus should move to modal on open and return to trigger on close
  • Size appropriately: Use smallest size that accommodates content without scrolling
  • Clear actions: Primary and secondary actions should be clearly distinguished
  • Loading states: Show loading indicators for async operations

Drawer Best Practices

  • Right drawers: Best for supplementary content, details, or settings
  • Left drawers: Ideal for navigation menus or filters
  • Bottom drawers: Perfect for mobile interfaces and quick actions
  • Consistent positioning: Use the same position for similar content types
  • Appropriate width/height: Ensure enough space without overwhelming main content
  • Smooth animations: Use CSS transitions for smooth slide in/out effects

Accessibility Requirements

  • ARIA attributes: Use role="dialog", aria-modal="true", and aria-labelledby
  • Focus trapping: Keep keyboard focus within the modal/drawer
  • ESC key: Always close modal/drawer when ESC is pressed
  • Screen readers: Announce when modals open and provide clear labels
  • Color contrast: Ensure sufficient contrast for all text and interactive elements
  • Keyboard navigation: All interactive elements must be keyboard accessible

CSS Classes Reference

Modal and Drawer CSS Classes
/* Modal Base Classes */
.modal {
  @apply fixed inset-0 z-50;
}

.modal-backdrop {
  @apply fixed inset-0 bg-black/50 transition-opacity;
}

.modal-container {
  @apply fixed inset-0 z-10 overflow-y-auto;
}

.modal-panel {
  @apply relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800;
  @apply text-left shadow-xl transition-all;
}

.modal-header {
  @apply border-b border-gray-200 dark:border-gray-700 px-6 py-4;
}

.modal-body {
  @apply px-6 py-4;
}

.modal-footer {
  @apply border-t border-gray-200 dark:border-gray-700 px-6 py-4;
  @apply flex justify-end space-x-3;
}

/* Modal Sizes */
.modal-sm .modal-panel {
  @apply sm:max-w-sm;
}

.modal-md .modal-panel {
  @apply sm:max-w-md;
}

.modal-lg .modal-panel {
  @apply sm:max-w-2xl;
}

.modal-xl .modal-panel {
  @apply sm:max-w-4xl;
}

.modal-fullscreen .modal-panel {
  @apply h-full w-full max-w-none;
}

/* Drawer Base Classes */
.drawer {
  @apply fixed inset-0 z-50;
}

.drawer-backdrop {
  @apply fixed inset-0 bg-black/50 transition-opacity;
}

.drawer-panel {
  @apply fixed bg-white dark:bg-gray-800 shadow-xl transform transition-transform;
}

/* Drawer Positions */
.drawer-right .drawer-panel {
  @apply inset-y-0 right-0 w-96 translate-x-full;
}

.drawer-left .drawer-panel {
  @apply inset-y-0 left-0 w-80 -translate-x-full;
}

.drawer-bottom .drawer-panel {
  @apply inset-x-0 bottom-0 translate-y-full rounded-t-lg;
}

.drawer-header {
  @apply border-b border-gray-200 dark:border-gray-700 px-6 py-4;
}

.drawer-body {
  @apply flex-1 overflow-y-auto p-6;
}

.drawer-footer {
  @apply border-t border-gray-200 dark:border-gray-700 px-6 py-4;
}

/* Animation States */
.modal.show .modal-backdrop,
.drawer.show .drawer-backdrop {
  @apply opacity-100;
}

.modal.show .modal-panel {
  @apply opacity-100 translate-y-0 sm:scale-100;
}

.drawer.show .drawer-right .drawer-panel {
  @apply translate-x-0;
}

.drawer.show .drawer-left .drawer-panel {
  @apply translate-x-0;
}

.drawer.show .drawer-bottom .drawer-panel {
  @apply translate-y-0;
}