Dialog

A modal overlay component that interrupts the user flow to capture focus for vital content or interactions.

Sizes

Use the dialog-content-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-dialog-z-index: 50;
  --ex-dialog-overlay-z-index: 45;
 
  --ex-dialog-font-size-sm: var(--text-sm);
  --ex-dialog-font-size-md: var(--text-sm);
  --ex-dialog-font-size-lg: var(--text-sm);
  --ex-dialog-font-size-xl: var(--text-sm);
 
  --ex-dialog-radius-sm: var(--radius-sm);
  --ex-dialog-radius-md: var(--radius-sm);
  --ex-dialog-radius-lg: var(--radius-sm);
  --ex-dialog-radius-xl: var(--radius-sm);
 
  --ex-dialog-shadow-sm: var(--shadow-xl);
  --ex-dialog-shadow-md: var(--shadow-xl);
  --ex-dialog-shadow-lg: var(--shadow-xl);
  --ex-dialog-shadow-xl: var(--shadow-xl);
 
  --ex-dialog-w-sm: var(--container-sm);
  --ex-dialog-w-md: var(--container-md);
  --ex-dialog-w-lg: var(--container-lg);
  --ex-dialog-w-xl: var(--container-xl);
 
  --ex-dialog-section-gap-x-sm: calc(var(--spacing) * 2.5);
  --ex-dialog-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-dialog-section-gap-x-lg: calc(var(--spacing) * 2.5);
  --ex-dialog-section-gap-x-xl: calc(var(--spacing) * 2.5);
 
  --ex-dialog-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-dialog-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-dialog-section-gap-y-lg: calc(var(--spacing) * 2);
  --ex-dialog-section-gap-y-xl: calc(var(--spacing) * 2);
 
  --ex-dialog-section-px-sm: calc(var(--spacing) * 5);
  --ex-dialog-section-px-md: calc(var(--spacing) * 5);
  --ex-dialog-section-px-lg: calc(var(--spacing) * 5);
  --ex-dialog-section-px-xl: calc(var(--spacing) * 5);
 
  --ex-dialog-section-py-sm: calc(var(--spacing) * 5);
  --ex-dialog-section-py-md: calc(var(--spacing) * 5);
  --ex-dialog-section-py-lg: calc(var(--spacing) * 5);
  --ex-dialog-section-py-xl: calc(var(--spacing) * 5);
 
  --ex-dialog-title-font-size-sm: var(--text-base);
  --ex-dialog-title-font-size-md: var(--text-base);
  --ex-dialog-title-font-size-lg: var(--text-base);
  --ex-dialog-title-font-size-xl: var(--text-base);
 
  --ex-dialog-title-font-weight: var(--font-weight-semibold);
 
  --ex-dialog-description-font-size-sm: var(--text-sm);
  --ex-dialog-description-font-size-md: var(--text-sm);
  --ex-dialog-description-font-size-lg: var(--text-sm);
  --ex-dialog-description-font-size-xl: var(--text-sm);
 
  --ex-dialog-description-font-weight: var(--font-weight-normal);
  --ex-dialog-description-opacity: var(--ex-options-opacity-muted);
}

API

Dialog

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Dialog Trigger

Element	Selector
`Dialog.Trigger`	`.ex-dialog-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Dialog Content

Element	Selector
`Dialog.Content`	`.ex-dialog-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Dialog Section

Element	Selector
`Dialog.Section`	`.ex-dialog-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Dialog Title

Element	Selector
`Dialog.Title`	`.ex-dialog-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Dialog Description

Element	Selector
`Dialog.Description`	`.ex-dialog-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Dialog Overlay

Element	Selector
`Dialog.Overlay`	`.ex-dialog-overlay`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Dialog Close

Element	Selector
`Dialog.Close`	`.ex-dialog-close`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`