Dialog
Pass a React element as trigger, then provide title, description, and body
content. The machine manages focus, dismissal, and scroll locking.
import { Button, Dialog } from '@manti-ui/react'; export default function DialogBasic() { return ( <Dialog trigger={<Button variant="primary">Open dialog</Button>} title="Freeze a batch?" description="Raw mantı freeze beautifully. Lay them on a floured tray, freeze solid, then bag them." > They keep for up to three months and cook straight from frozen — just add a minute to the boil. </Dialog> ); }
Footer actions
footer may be a function receiving { close }.
Sizes
API
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactElement | — | Element cloned with the open trigger props. |
title | ReactNode | — | Heading shown at the top. |
description | ReactNode | — | Supporting copy under the title. |
children | ReactNode | (({ close }) => ReactNode) | — | Body; accepts a render function receiving { close }. |
footer | ReactNode | (({ close }) => ReactNode) | — | Footer actions; also receives { close }. |
size | 'sm' | 'md' | 'lg' | 'md' | Width preset. |
open / defaultOpen | boolean | — | Controlled / uncontrolled open state. |
onOpenChange | (open: boolean) => void | — | Called whenever the open state changes. |
modal | boolean | true | Trap pointer interaction and hide content below. |
Styling
Anatomy
| Part | Selector | Description |
|---|---|---|
trigger | [data-scope="dialog"][data-part="trigger"] | The cloned opener element. |
backdrop | [data-scope="dialog"][data-part="backdrop"] | The dimmed scrim. |
positioner | [data-scope="dialog"][data-part="positioner"] | Centers the content. |
content | [data-scope="dialog"][data-part="content"] | The translucent panel. |
title | [data-scope="dialog"][data-part="title"] | The heading. |
description | [data-scope="dialog"][data-part="description"] | Supporting copy. |
body | [data-scope="dialog"][data-part="body"] | The main content region. |
footer | [data-scope="dialog"][data-part="footer"] | The actions region. |
Tokens
| Token | Controls |
|---|---|
--manti-dialog-max-width | max width |
--manti-dialog-radius | radius |
--manti-dialog-padding-x | padding x |
--manti-dialog-padding-y | padding y |
--manti-dialog-gap | gap |
--manti-dialog-z-index | z index |
Last updated