Dialog

Overlays

A focused modal surface with title, description, footer and a backdrop.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import * as React from "react";
import { Button, Dialog } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Dialog open={open} onOpenChange={setOpen} title="Title">
  Content
</Dialog>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	—	Uncontrolled initial state.
onOpenChange	(open: boolean) => void	—	Called when the dialog opens or closes.
trigger	ReactElement	—	Element that opens the dialog.
title	ReactNode	—	Dialog title.
description	ReactNode	—	Supporting description.
footer	ReactNode	—	Actions rendered at the bottom.
showClose	boolean	true	Shows the close icon button.