Modal
<Modal>
<div>This is demo content</div>
</Modal>
Highlighted props
For the complete list of props, use your IDE's autocomplete functionality.
Trigger button customization
<Modal
triggerLabel='Click me'
triggerIcon={icons.pointerHand}
>
<div>This is demo content</div>
</Modal>
More advanced customizations
triggerProps
accepts all props a Button
accepts.
<Modal
triggerIcon={icons.trash}
triggerProps={{ type: 'danger' }}
>
<div>This is demo content</div>
</Modal>
Customization
Title
Add the title to the modal by passing a title
prop.
<Modal
title='This is a title'
>
<div>This is demo content</div>
</Modal>
Actions
Add actions to the bottom of the modal with the actions
prop.
<Modal
title='Message'
actions={
<Button
type='ghost'
slot='close'
>
Cancel
</Button>
<Button
type='selected'
slot='close'
onPress={() => alert('OK clicked')}
>
OK
</Button>
}
>
<div>This is demo content</div>
</Modal>
Closing the modal
You can add slot='close'
to any button inside the modal to close it when clicked.
This works both with the fully manual control, and the automatic trigger button.
If using buttons from Eightshift UI components (or anything React Aria-based), and have onPress
passed to the button,
slot='close'
will automatically close the modal after the onPress
function is executed.
Header actions
You can add actions to the header of the modal with the headerActions
prop.
<Modal
title='Message'
headerActions={
<Button
type='ghost'
size='small'
icon={icons.experiment}
aria-label='Demo button'
onPress={() => alert('Demo button clicked')}
/>
}
>
<div>This is demo content</div>
</Modal>
Disabling the close button
If you want to disable the close button in the header, you can pass noCloseButton
prop.
Modal will still be closable by clicking outside of it, or pressing the Esc
key (if noClickToDismiss
is not set).
You should, however, provide a way to close the modal in your content, such as a button with slot='close'
.
<Modal
title='Message'
actions={
<Button type='ghost' slot='close'>Close</Button>
}
noCloseButton
>
<div>This is demo content</div>
</Modal>
Trigger button replacement
If you want to render your own trigger button, you can either:
- replace the default trigger with a
customTrigger
- manually control the modal with
open
andonOpenChange
Replacing the default trigger
The passed component needs to be compatible with React Aria's pressable system, so it can automatically wire up the modal's open/close functionality.
<Modal
customTrigger={
<Button
type='ghost'
icon={icons.pointerHand}
>
Click me
</Button>
}
>
<div>This is demo content</div>
</Modal>
Full manual control
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Click me</button>
<Modal
open={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
>
<div>This is demo content</div>
</Modal>
</>
);