Dialog

Dialog — составной компонент для модальных оверлеев с частями корня, триггера и содержимого.

Обзор

Стилизация Dialog намеренно лёгкая. Большая часть внешнего вида задаётся токенами поверхностей на уровне темы и несколькими правилами раскладки содержимого.

Публичные CSS-переменные

Текущая реализация не предоставляет большого задокументированного набора переменных --dialog-*. Основные точки стилизации — глобальные семантические переменные.

Переменная	Значение	Влияет на
основная поверхность диалога`DialogContent`		В этом состоянии изменений не видно
тень приподнятой поверхности при `data-shadowed='true'DialogContent`		В этом состоянии изменений не видно
внутренние отступы`DialogContent`	—	В этом состоянии изменений не видно
скругление углов`DialogContent`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Содержимое

DialogContent использует:

--surface-primary
--surface-shadow
токены отступов для внутренних отступов
токены скругления для формы

Подложка

Подложка — это ::backdrop элемента DialogContent. Она использует --overlay при data-overlay='true' и размытие при data-blurred='true'. Стилизуйте её через класс DialogContent:

.my-dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

Взаимодействие состояний и вариантов

data-shadowed='true' включает --surface-shadow
data-fluid='true' убирает ограниченную модальную раскладку и занимает всё доступное пространство
data-status='close' управляет переходом закрытия; переход открытия начинается из @starting-style
data-blurred='true' размывает страницу за диалогом
data-overlay='true' затемняет страницу за диалогом

Примеры

Настройка поверхности на уровне темы

.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --surface-shadow: 0 20px 60px oklch(20% 0.02 60 / 0.18);
}

Резиновый диалог на уровне продукта

LTRRTL

product-level-fluid-dialog.tsx · 62 строки

import { useId, type CSSProperties } from 'react';
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,
  Icon,
  IconButton,
  Label,
  TextArea,

Шапка в стиле Apple

Шапка с небольшим заголовком и круглой кнопкой закрытия 24px в углу — это обычная композиция: Heading с size={4} и fontWeight={600} и DialogClose asChild вокруг IconButton, абсолютно позиционированной в верхнем конечном углу (position: absolute, insetBlockStart: 16, insetInlineEnd: 16); содержащим блоком служит открытый модальный <dialog>. У IconButton нет для этого опции размера или формы; круглая кнопка 24px получается из двух CSS-переменных, заданных на ней, — --icon-button-size: 24px и --icon-button-br-ratio: 0.5, — с Icon size='xs' внутри.

Не переопределяйте

не считайте внутренние data-атрибуты широким публичным API стилизации
не убирайте визуальный контраст между подложкой и поверхностью содержимого
не переопределяйте стили диалога так, чтобы ломалась видимость фокуса или удобство прокрутки