Skip to main content

Overview

HuxDialog is a customizable dialog component that provides a consistent modal experience with optional header, content, and action buttons. The dialog automatically adapts to light and dark themes and provides a clean, modern appearance with proper spacing and accessibility.

Component Variants

Basic Dialog

Basic dialog Simple dialog with title and content:

Confirmation Dialog

Dialog for confirming important actions:

Large Dialog

Dialog with extensive content:

Size Variants

Small Dialog

Compact dialog for simple confirmations:

Medium Dialog

Standard dialog size (default):

Large Dialog

Spacious dialog for complex content:

Extra Large Dialog

Maximum size for extensive content:

Using showHuxDialog

For convenience, Hux provides a showHuxDialog function that wraps the dialog in a showDialog call:

Properties

Core Properties

  • title - Optional title text displayed in the dialog header
  • subtitle - Optional subtitle text displayed below the title
  • content - The main content widget to display in the dialog body
  • actions - Optional list of action buttons displayed at the bottom

Appearance Properties

  • variant - Visual variant of the dialog (default, destructive, success, warning)
  • size - Size variant of the dialog (small, medium, large, extraLarge)
  • showCloseButton - Whether to show a close button in the header (default: true)

Behavior Properties

  • barrierDismissible - Whether the dialog can be dismissed by tapping outside
  • clipBehavior - How to clip the dialog content
  • shape - Custom shape for the dialog
  • insetPadding - Padding around the dialog content

Styling & Layout

Dimensions

  • Small: Max width 400px, min width 300px
  • Medium: Max width 500px, min width 350px (default)
  • Large: Max width 700px, min width 500px
  • Extra Large: Max width 900px, min width 700px

Color System

  • Background: HuxTokens.surfaceElevated(context)
  • Text: HuxTokens.textPrimary(context) and HuxTokens.textSecondary(context)
  • Borders: HuxTokens.borderPrimary(context) and HuxTokens.borderSecondary(context)
  • Shadows: HuxTokens.shadowColor(context) with proper opacity

Typography

  • Title: 18-24px with medium weight (based on size)
  • Subtitle: 14px with secondary text color
  • Content: Inherits from theme

Accessibility

Screen Reader Support

  • Proper semantic labeling for dialog content
  • Title and subtitle announcements
  • Action button descriptions

Keyboard Navigation

  • Tab key support for action buttons
  • Enter/Space key activation
  • Escape key dismissal (when barrierDismissible is true)

Focus Management

  • Automatic focus on first action button
  • Proper focus trapping within dialog
  • Focus restoration on dialog close

Best Practices

  • Use Small for simple confirmations
  • Use Medium for standard content (default)
  • Use Large for forms or complex content
  • Use Extra Large for extensive content or full-screen experiences
  • Place primary actions on the right
  • Use secondary variant for cancel/dismiss actions
  • Limit to 2-3 action buttons for clarity
  • Use clear, action-oriented button text
  • Keep titles concise and descriptive
  • Use subtitles for additional context
  • Structure content with proper spacing
  • Consider mobile screen sizes
  • Provide meaningful titles and subtitles
  • Use semantic button labels
  • Ensure proper contrast ratios
  • Test with screen readers

Examples

Form Dialogs

Create dialogs with form inputs and validation

Confirmation Flows

Build multi-step confirmation processes

Content Display

Show rich content in modal dialogs

Custom Styling

Customize dialog appearance and behavior