Modal
Modals focus the user's attention on a specific task or piece of information. They block interaction with the rest of the page until dismissed.
Sizes
Three sizes are available — sm, md, and lg. The default is md.
Examples
Modals work well for forms and destructive confirmations where the user needs to make a deliberate decision before continuing.
Usage
Control the modal with isOpen and onClose. Pass primaryAction and secondaryAction to render footer buttons. Size defaults to md if not specified.
Explore the Modal component by adjusting its properties below. Use the button in the preview to open the modal with your current settings.
Properties
Primary action
Secondary action
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Add a new plant"
primaryAction={{ label: "Confirm", onClick: () => {} }}
secondaryAction={{ label: "Cancel", onClick: () => {} }}
>
Modal content goes here.
</Modal>