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

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 ashowHuxDialog
function that wraps the dialog in a showDialog
call:
Properties
Core Properties
title
- Optional title text displayed in the dialog headersubtitle
- Optional subtitle text displayed below the titlecontent
- The main content widget to display in the dialog bodyactions
- 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 outsideclipBehavior
- How to clip the dialog contentshape
- Custom shape for the dialoginsetPadding
- 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)
andHuxTokens.textSecondary(context)
- Borders:
HuxTokens.borderPrimary(context)
andHuxTokens.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
Choose the Right Size
Choose the Right Size
- 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
Action Button Layout
Action Button Layout
Content Organization
Content Organization
- Keep titles concise and descriptive
- Use subtitles for additional context
- Structure content with proper spacing
- Consider mobile screen sizes
Accessibility
Accessibility
- 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