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 and onOpenChange

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>
	</>
);