Dialog
The <Dialog> is a overlay component. This means it displays a modal as a reaction to an event. It appears in the middle of the display and blurs out the underlay.
This component can be styled in different parts. It has as parts closeButton and container, which is the component itself, and these parts can be styled separately.
A special thing is also that you can have props on the <Dialog.Trigger> and on the <Dialog> itself. The closeButton is an optionally property with which you can close the <Dialog>.
The <Dialog> can also be used if you want to controll it for example within a <Menu>.
Import
import { Dialog } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | | The available variants of this component. |
size | medium | The available sizes of this component. |
Props
Dialog
| Property | Type | Default | Description |
|---|---|---|---|
closeButton | boolean | false | Show the close button |
children | ReactNode | - | Children of the component. |
Dialog.Trigger
| Property | Type | Default | Description |
|---|---|---|---|
dismissable | boolean | true | Whether to close the overlay when the user interacts outside it. |
keyboardDismissable | boolean | true | Whether pressing the escape key to close the overlay should be disabled. |
children | ReactNode | - | Children of the component. |
Examples
Form Dialog
The example shows how to use a <Dialog> in a simple form context. You can see the closeButton is not present by default, you have to click on the buttons or on the underlay to exit the dialog.
Dismiss Dialog
If you choose to add dismissable={false} to your <Dialog.Trigger>, you can't exit the dialog with clicking on the underlay. Notice to add a action button or the closeButton property to the <Dialog> as shown in the example, without that you can't click out of the dialog. You just have the possibility to use the escape key on your keyboard. But that's also a property you can set to false.
Dialog opend from Menu
This Example shows how to open a <Dialog> from a <Menu.Item>.
For that you have to use a <Dialog.Trigger>, but without that you don't have to use a <Button> to trigger the dialog, you can write it directly.