Dialog

Sizes

The dialog component has two sizes: sm and md. Size governs the width of the dialog, as well as the content's spacing, font size, and padding.

<div q-dialog-root size="sm">
  <button emphasis="primary" q-button q-dialog-trigger variant="fill">
    Open Dialog (sm)
  </button>
  <dialog-content-demo />
</div>

Indicator Emphasis

Use the emphasis prop to change the intent and color of the dialog's indicator icon.

Custom Indicator

Set a custom indicator icon by providing the q-dialog-indicator-icon directive within the q-dialog-body directive. Or hide it entirely using the hideIndicatorIcon property on the q-dialog-body directive.

<div q-dialog-body>
  <svg q-dialog-indicator-icon qIcon="AArrowDown"></svg>
  <button q-dialog-close-button></button>
  <h2 q-dialog-heading>Dialog Title</h2>
  <div q-dialog-description>Dialog Description</div>
</div>

Placement

Use the placement prop to change the placement of the dialog.

Controlled State

Dialog visibility can be controlled using the open, openChanged and defaultOpen properties. These properties follow our controlled state pattern.

Outside Scroll

The default scrollBehavior is outside, which makes the entire page scrollable when modal content exceeds viewport height. The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.

Inside Scroll

Set the scrollBehavior prop to inside to create an internal scroll area within the modal.

Alert Dialog

Set the role prop to alertdialog to change the dialog component to an alert dialog. This is recommended for situations where the dialog is used to notify users of urgent information that demands their immediate attention.

<q-dialog-floating-portal>

A helper component that combines the portal, positioner, and content components. This shortcut is equivalent to:

<q-portal>
  <div q-dialog-backdrop></div>
  <div q-dialog-positioner>
    <section q-dialog-content><ng-content /></section>
  </div>
</q-portal>

<q-dialog-root>

string

boolean

true

boolean

true

boolean

'ltr' | 'rtl'

"ltr"

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'neutral'

() => HTMLElement

() =>
| Node
| ShadowRoot
| Document

boolean

false

() => HTMLElement

boolean

false

boolean

true

boolean

Array<
  () => Element
>

| 'top'
| 'center'
| 'bottom'

'top'

boolean

boolean

true

boolean

true

| 'dialog'
| 'alertdialog'

'dialog'

| 'inside'
| 'outside'

'outside'

'sm' | 'md'

'sm'

boolean

false

boolean

true

boolean

false

KeyboardEvent

void

CustomEvent<{
  event?: E
}>

| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>

boolean

CustomEvent<{
  event?: E
}>

CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>

string

boolean

boolean

boolean

'ltr' | 'rtl'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

() => HTMLElement

() =>
| Node
| ShadowRoot
| Document

boolean

() => HTMLElement

boolean

boolean

boolean

Array<
  () => Element
>

| 'top'
| 'center'
| 'bottom'

boolean

boolean

boolean

| 'dialog'
| 'alertdialog'

| 'inside'
| 'outside'

'sm' | 'md'

boolean

boolean

boolean

KeyboardEvent

void

CustomEvent<{
  event?: E
}>

| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>

boolean

CustomEvent<{
  event?: E
}>

CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>

<q-dialog-floating-portal>

| HTMLElement
| ElementRef<HTMLElement>

boolean

| HTMLElement
| ElementRef<HTMLElement>

boolean

q-dialog-backdrop

'qui-dialog__backdrop'

'backdrop'

'dialog'

| 'open'
| 'closed'

boolean

'qui-dialog__backdrop'

'backdrop'

'dialog'

| 'open'
| 'closed'

boolean

q-dialog-positioner

string

string

'qui-dialog__positioner'

'positioner'

| 'top'
| 'center'
| 'bottom'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

CSSProperties

'qui-dialog__positioner'

'positioner'

| 'top'
| 'center'
| 'bottom'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

CSSProperties

q-dialog-content

string

string

'qui-dialog__content'

'content'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

| 'open'
| 'closed'

boolean

-1

'qui-dialog__content'

'content'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

| 'open'
| 'closed'

boolean

-1

q-dialog-body

boolean

boolean

'qui-dialog__body'

'body'

'dialog'

'sm' | 'md'

'qui-dialog__body'

'body'

'dialog'

'sm' | 'md'

q-dialog-heading

string

string

'qui-dialog__heading'

'heading'

'dialog'

'sm' | 'md'

'qui-dialog__heading'

'heading'

'dialog'

'sm' | 'md'

q-dialog-footer

'qui-dialog__footer'

'footer'

'dialog'

'sm' | 'md'

'qui-dialog__footer'

'footer'

'dialog'

'sm' | 'md'

q-dialog-indicator-icon

'qui-dialog__indicator-icon'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'sm' | 'md'

'qui-dialog__indicator-icon'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'sm' | 'md'

q-dialog-close-button

string

string

'qui-dialog__close-button'

'close-trigger'

'dialog'

'qui-dialog__close-button'

'close-trigger'

'dialog'