arieare ds

components / main

dialog popup

DialogPopup packages a styled native dialog with a card-framed header, body, and action row. It is the main package's drop-in confirmation and acknowledgement surface for compact utility flows.

field value
group main
import @arieare/ds-main
source packages/ds-main/src/DialogPopup.tsx
packages/ds-main/src/dialog-popup.css

archive this snippet?

This preview keeps the dialog open so the layout, body copy, and action row stay visible.

DialogPopup frames a title, description, body area, and paired actions inside a styled native dialog.

component tokens

token source description
--card-bg / --card-border / --card-radius @arieare/ds/tokens.css Inherited card tokens used by the dialog panel.
--ui-surface-overlay @arieare/ds/tokens.css Shared overlay tint used behind the dialog viewport.
--page-bg / --primary-ink @arieare/ds-main/tokens.css Main-app ink and surface aliases applied inside the dialog content.

props

prop type default description
id string — Stable dialog id used to connect the title and dialog root.
title string — Dialog heading content.
description string — Optional supporting copy shown below the title.
confirmLabel / cancelLabel string "confirm" / "cancel" Button labels for the action row.
confirmVariant "default" | "danger" "default" Changes the confirm action styling.
className / children string | ReactNode — Extra dialog classes and arbitrary body content.
...dialog attributes DialogHTMLAttributes<HTMLDialogElement> — Passes standard dialog attributes to the root dialog element.