Modal
Modal components act as pivotal moments of interaction, capturing user attention with essential information or choices. Crafted for versatility, they're employed to confirm user decisions, display notices, or facilitate user input, effectively bridging user actions with minimal interruption to the broader application experience.
Examples
Default
Default Modal.
Title Header Modal
Add a title by passing the title prop to the component.
Change the location of the header by passing the iconPlacement prop to the component.
Detailed Header Modal
Add a subtitle by passing the subtitle prop to the component.
Icon Header Modal
Add an icon by passing the icon prop to the component.
Change the location of the icon by passing the iconPlacement prop to the component.
Bordered Header Modal
Add a border to the header by passing the bordered prop to the component.
Trigger
Change the trigger that opens the Modal by passing the trigger prop to the component.
Installation
Properties
For more advanced usage, see https://www.radix-ui.com/primitives/docs/components/dialog (opens in a new tab).
Element that opens the Modal when clicked.
Toggle whether to show the close icon in the top right corner of the Modal.
Footer displayed in the Modal.
Title displayed in the header of the Modal.
Description displayed in the header of the Modal.
Icon displayed in the header of the Modal.
Toggle whether the header is bordered.
Alignment of header in the Modal.
Placement of header icon in the Modal.