Modal Screen Safe Area

ProNew

A full-screen modal that slides up over the app with a top bar holding Cancel and Save, a scrolling body and bottom padding for the home indicator, and that traps focus and closes on Escape. Use this when a phone task needs the whole screen, such as composing a post or editing an event, and should still feel like a layer over the page.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

children

Guide and examples

When to use it

Use it when a phone task needs the whole screen, such as composing a post or editing an event, and should still feel like a layer over the page.

Do not use it for short tasks (use a bottom sheet) or navigation to another page.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`title`	`string`	`required`	The modal's title.
`onSave`	`() => void`	`required`	Save and close.
`children`	`ReactNode`	`required`	The form.
`trigger`	`ReactNode`	`-`	Opens the modal.

Accessibility

A real modal dialog at full height (snap point 1) with a title; Cancel and Save are in a top bar padded for the notch, and Escape cancels.
Focus starts in the body and returns to the trigger on close.
The bar and the body are separate regions, so the form scrolls under a fixed bar.

Testing

The pattern ships with a Testing Library test (modal-screen-safe-area.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone task needs the whole screen, such as composing a post or editing an event, and should still feel like a layer over the page.

Do not use it for short tasks (use a bottom sheet) or navigation to another page.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`title`	`string`	`required`	The modal's title.
`onSave`	`() => void`	`required`	Save and close.
`children`	`ReactNode`	`required`	The form.
`trigger`	`ReactNode`	`-`	Opens the modal.

Accessibility

A real modal dialog at full height (snap point 1) with a title; Cancel and Save are in a top bar padded for the notch, and Escape cancels.
Focus starts in the body and returns to the trigger on close.
The bar and the body are separate regions, so the form scrolls under a fixed bar.

Testing

The pattern ships with a Testing Library test (modal-screen-safe-area.test.tsx) that drives it through roles and the keyboard.