Glowup
FEEDBACK · 61 / 89
Modal
Modal — a Material You feedback component for React Native and web.
󱀫
packages/ui/src/components/Modal/Modal.tsx
Live demo
Properties
7 controls
Visible
Title
Content
Close Text
Hero icon
Dismissable
Scrollable body
Usage
Modal.tsx
<Modal visible={false} title="Dialog Title"> This is the modal body content. </Modal>
Variants
The states and shapes this component is meant to be used in.
Dialog
A title, a body and a single close action.
Component library
34 components · last synced 4 minutes ago
Rich content
Children instead of a string, with the dialog's own action row.
Team
3 members · 2 pending invites
Untitled
Release notes
@its/glowup-ui 0.1.0
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
14 on ModalProps
Filter props
󰍉
children
required
React.ReactNode | string
visible
required
boolean
Whether the dialog is on screen.
actions
React.ReactNode
Trailing action row. Replaces the single `closeText` button. In a full-screen dialog it moves into the header, after the title.
animationType
"none" | "slide" | "fade"
default: "fade"
closeText
string
default: "Close"
dismissable
boolean
default: true
Whether tapping the scrim (and pressing ESC on web) dismisses the dialog. Turn it off for a decision the user must not be able to skip. Defaults to `true`.
fullScreen
boolean
default: false
The M3 full-screen dialog, for a form on a compact window: it fills the window, with a close button, the title and `actions` in a header row and a scrolling body. Defaults to `false`.
icon
IconSource
Hero glyph above the title (M3 dialog icon). Centres the header.
onClose
() => void
onDismiss
() => void
Called on Android back / ESC without rendering the close button. Falls back to onClose.
scrollable
boolean
default: false
Scrolls the body when the content is taller than the dialog.
testID
string
default: "modal"
Root testID. The scrim gets `${testID}-scrim`.
title
string
transparent
boolean
default: true