Dialog

Open dialog

Contract

Overview

Machine-readable contract from Component Spec.

component: dialogexport: Dialogversion: 1recipe: dialogtokens.visual: dialogattributes: data-refineui=dialog

Anatomy

Part	data-refineui
root	dialog
scrim	presentation
panel	panel
header	header
title	title
description	description
body	content
close	close

Variants

Axis	Values
size	sm, lg

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: open, closed
component	environment	forced-colors, dir, prefers-contrast
dialog	component	data-state: open, closed

Accessibility

Slot	Element	Role	Required attributes	Labeling
dialog	div	dialog	aria-modal: required=true, type: boolean; aria-labelledby: required=true, type: string	labelledBy: title; describedBy: optional

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	trap	true
behavior	initial	first-focusable
behavior	return	trigger

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Open dialog

Recipe → Tokens

Slot bindings for variant="default" — declared in dialog.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
panel	—	background	dialog.panel.background	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary
title	—	foreground	dialog.title.foreground	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
description	—	foreground	dialog.description.foreground	foregroundSecondary	neutral600	neutral350	text-refineui-alias-foreground-secondary

Component token trace

All paths in token-trace-v2.json prefixed with dialog.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
dialog.content.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
dialog.description.foreground	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
dialog.header.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
dialog.overlay	surfaceOverlay	—	—	—	—
dialog.panel.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
dialog.panel.description	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
dialog.panel.title	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
dialog.title.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogClose,
  Button,
} from "@refineui/react";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to continue?
      </DialogDescription>
    </DialogHeader>
    <DialogClose asChild>
      <Button>Cancel</Button>
    </DialogClose>
  </DialogContent>
</Dialog>

<Dialog size="sm" open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent scrollable={false}>
    {/* Content with custom scroll handling */}
  </DialogContent>
</Dialog>

Contract source: packages/react/spec/components/dialog.json — rendered by SpecRenderer above.