Dialog

Dialogs interrupt the page to capture a decision or short form. They trap focus and return it when dismissed.

Try it

Usage

Register dialogs with installDialogs, then open them imperatively via openDialog or a trigger with data-dialog-open. Compose title, body, and actions with the sub-components.

import {
  RuiDialog,
  RuiDialogTitle,
  RuiDialogBody,
  RuiDialogActions,
  RuiDialogClose,
  installDialogs,
  openDialog,
} from '@ecopages/radiant-ui/dialog';
 
installDialogs();
 
<RuiDialog id="edit-profile" label="Edit profile">
  <RuiDialogTitle>Edit profile</RuiDialogTitle>
  <RuiDialogBody>Update your display name and email.</RuiDialogBody>
  <RuiDialogActions>
    <RuiDialogClose>Cancel</RuiDialogClose>
    <button type="button">Save</button>
  </RuiDialogActions>
</RuiDialog>

Alert dialogs

Set alert to true for destructive confirmations. Alert dialogs limit tab order to the dialog actions.

Return focus on close

Focus returns to the element that opened the dialog. Avoid stacking multiple modal layers.

Theming

Dialog surfaces map to semantic surface roles, never Tailwind palette steps:

Body uses the p-inset spacing token. Override roles at the theme layer, not in component CSS.

Accessibility

• Every dialog needs an accessible name via label or RuiDialogTitle.
• Use alert for confirmations that require an explicit decision before continuing.
• Do not open a dialog without a clear way to dismiss it; provide a close action.

API

RuiDialog is a custom element (<rui-dialog>) with a composition-first surface. Pass title / actions for the composite API, or compose the view helpers as children.

Attributes (<rui-dialog>)

Slots

Events

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles