Alert Dialog

A modal overlay component that requires an explicit user action or confirmation before closing.

Sizes

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

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


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

API

Alert Dialog

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

Alert Dialog Trigger

Element	Selector
`AlertDialog.Trigger`	`.ex-alert-dialog-trigger`

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

Alert Dialog Content

Element	Selector
`AlertDialog.Content`	`.ex-alert-dialog-content`

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

Alert Dialog Section

Element	Selector
`AlertDialog.Section`	`.ex-alert-dialog-section`

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

Alert Dialog Overlay

Element	Selector
`AlertDialog.Overlay`	`.ex-alert-dialog-overlay`

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

Alert Dialog Title

Element	Selector
`AlertDialog.Title`	`.ex-alert-dialog-title`

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

Alert Dialog Description

Element	Selector
`AlertDialog.Description`	`.ex-alert-dialog-description`

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

Alert Dialog Action

Element	Selector
`AlertDialog.Action`	`.ex-alert-dialog-action`

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

Alert Dialog Cancel

Element	Selector
`AlertDialog.Cancel`	`.ex-alert-dialog-cancel`

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