Overlay components cover modal flows, custom dialogs, destructive confirmations, dropdown menus, and copy actions. Use `Modal` for common controlled overlays and `Dialog` for custom composition.
Modal
Controlled modal wrapper built on top of `Dialog`. Use it for common app overlays where you want title/content/action slots without composing the full dialog namespace.
Props / API
Name
Type
Description
open
boolean
Controlled open state.
onCancel
() => void
Called when the modal requests closing.
title
string | ReactNode
Optional title slot.
action
ReactNode
Optional footer/action slot.
confirmClose
boolean
Ask for confirmation before closing.
Usage
Dialog
Compound dialog namespace for custom modal composition. Use it when `Modal` is too opinionated and you need a custom trigger, title, content, or action layout.
Props / API
Name
Type
Description
Dialog
{ open?, defaultOpen?, className? }
Provider/root for dialog state.
Dialog.Trigger
component
Opens the dialog from custom trigger content.
Dialog.Modal
component
Modal surface and close behavior.
Dialog.Title / Content / Action
components
Named modal slots.
Usage
Popconfirm
Inline confirmation popover for destructive or irreversible actions. It wraps a trigger element and shows localized OK/cancel buttons.
Props / API
Name
Type
Description
title
string
Confirmation title.
description
ReactNode
Optional detailed message.
onConfirm
() => void
Called when the user confirms.
okText / cancelText
string
Custom button labels.
Usage
Dropdown
Compact dropdown menu wrapper. It is commonly used for row actions, comment/story menus, and context actions in list UIs.
Props / API
Name
Type
Description
value
ReactNode
Trigger button content.
content
ReactNode
Dropdown menu content.
buttonClassName
string
Classes for the trigger button.
dropdownClassName
string
Classes for the menu panel.
Usage
Copy
Copy-to-clipboard trigger that also shows a global success message through Akan store messages.
