Skip to main content
Mantı UI logoMantı UIv0.12.1
Studio

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 may be a function receiving { close }.

Sizes

API

PropTypeDefaultDescription
triggerReactElementElement cloned with the open trigger props.
titleReactNodeHeading shown at the top.
descriptionReactNodeSupporting copy under the title.
childrenReactNode | (({ close }) => ReactNode)Body; accepts a render function receiving { close }.
footerReactNode | (({ close }) => ReactNode)Footer actions; also receives { close }.
size'sm' | 'md' | 'lg''md'Width preset.
open / defaultOpenbooleanControlled / uncontrolled open state.
onOpenChange(open: boolean) => voidCalled whenever the open state changes.
modalbooleantrueTrap pointer interaction and hide content below.

Styling

Anatomy

PartSelectorDescription
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

TokenControls
--manti-dialog-max-widthmax width
--manti-dialog-radiusradius
--manti-dialog-padding-xpadding x
--manti-dialog-padding-ypadding y
--manti-dialog-gapgap
--manti-dialog-z-indexz index

Last updated

Built end-to-end with Manti UI components and design tokens. Manti UI is a framework-agnostic design system on Zag.js.

GitHub