Dialog

The Dialog component presents content above the app, supporting focus trapping, scroll locking, and multiple presentation styles (modal, confirmation, bottom sheet).

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽¹⁹⁾

Playground

Call openDialog with variant: 'modal' to show a titled dialog and wire action buttons to closeDialog when the user makes a choice.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Row
,
 
Text
,
 useDialog 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
{
 openDialog
,
 closeDialog 
}
 
=
 
useDialog
(
)
;
 
  
const
 showBasicDialog 
=
 
(
)
 
=>
 
{
    
const
 dialogId 
=
 
openDialog
(
{
      variant
:
 
'modal'
,
      title
:
 
'Basic Dialog'
,
      content
:
 
(
        
<Block
 
p
=
"md"
>
          
<Text
>
This
 is a basic modal dialog with theme
-
aware styling
.
</Text
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
Works
 in both light and dark mode
.
          
</Text
>
          
<Row
 
gap
=
"sm"
 
mt
=
"sm"
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
 fullWidth 
variant
=
"secondary"
 
onPress
=
{
(
)
 
=>
 
closeDialog
(
dialogId
)
}
>
                
Cancel
              
</Button
>
            
</Block
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
                fullWidth
                
onPress
=
{
(
)
 
=>
 
{
                  console
.
log
(
'OK button pressed!'
)
;
                  
closeDialog
(
dialogId
)
;
                
}
}
                
variant
=
"filled"
              
>
                
OK
              
</Button
>
            
</Block
>
          
</Row
>
        
</Block
>
      
)
    
}
)
;
  
}
;
 
  
return
 
(
    
<Button
 
onPress
=
{
showBasicDialog
}
>
Open
 
Basic
 
Dialog
</Button
>
  
)
;
}

Bottom Sheet

Switch the dialog variant to 'bottomsheet' to get swipe-to-dismiss behavior and retain full control with closeDialog handlers.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Input
,
 
Text
,
 useDialog 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
{
 openDialog
,
 closeDialog 
}
 
=
 
useDialog
(
)
;
 
  
const
 showBottomSheetDialog 
=
 
(
)
 
=>
 
{
    
const
 dialogId 
=
 
openDialog
(
{
      variant
:
 
'bottomsheet'
,
      content
:
 
(
        
<Block
>
          
<Text
>
This
 dialog slides up 
from
 the bottom with theme
-
aware styling
.
</Text
>
          
<Block
>
            
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
              
Drag
 the handle or surface to move it
.
            
</Text
>
            
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
              
Swipe
 down to dismiss with velocity thresholds
.
            
</Text
>
            
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
              
Rubber
-
band resistance keeps the sheet anchored
.
            
</Text
>
          
</Block
>
          
<Input
 
placeholder
=
"Try typing while dragging..."
 
/>
          
<Button
 
variant
=
"subtle"
 
onPress
=
{
(
)
 
=>
 
closeDialog
(
dialogId
)
}
>
            
Close
 programmatically
          
</Button
>
        
</Block
>
      
)
    
}
)
;
  
}
;
 
  
return
 
(
    
<Button
 
onPress
=
{
showBottomSheetDialog
}
>
Open
 
Bottom
 
Sheet
</Button
>
  
)
;
}

Confirmation

Pair variant: 'modal' with a destructive button (color="error") to confirm irreversible actions before calling your business logic.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Row
,
 
Text
,
 useDialog 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
{
 openDialog
,
 closeDialog 
}
 
=
 
useDialog
(
)
;
 
  
const
 showConfirmationDialog 
=
 
(
)
 
=>
 
{
    
const
 dialogId 
=
 
openDialog
(
{
      variant
:
 
'modal'
,
      title
:
 
'Confirm Action'
,
      content
:
 
(
        
<Block
 
p
=
"md"
>
          
<Text
>
Are
 you sure you want to delete 
this
 item?
</Text
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
This
 action cannot be undone
.
          
</Text
>
 
          
<Row
 
gap
=
"sm"
 
mt
=
"sm"
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
 fullWidth 
variant
=
"subtle"
 
onPress
=
{
(
)
 
=>
 
closeDialog
(
dialogId
)
}
>
                
Cancel
              
</Button
>
            
</Block
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
                fullWidth
                
variant
=
"filled"
                
color
=
"error"
                
onPress
=
{
(
)
 
=>
 
{
                  console
.
log
(
'Item has been deleted'
)
;
                  
closeDialog
(
dialogId
)
;
                
}
}
              
>
                
Delete
              
</Button
>
            
</Block
>
          
</Row
>
        
</Block
>
      
)
    
}
)
;
  
}
;
 
  
return
 
(
    
<Button
 
onPress
=
{
showConfirmationDialog
}
>
Show
 
Confirmation
</Button
>
  
)
;
}

Form Dialog

Embed inputs in the dialog content, collect values via controlled callbacks, and validate before resolving the promise or calling closeDialog.

Loading demo…

import
 
{
 useRef 
}
 
from
 
'react'
;
import
 
{
 
Alert
,
 
TextInput
 
}
 
from
 
'react-native'
;
 
import
 
{
 
Block
,
 
Button
,
 
Input
,
 
Row
,
 
Text
,
 useDialog 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
{
 openDialog
,
 closeDialog 
}
 
=
 
useDialog
(
)
;
  
const
 nameRef 
=
 useRef
<TextInput
>
(
null
)
;
 
  
const
 showFormDialog 
=
 
(
)
 
=>
 
{
    
let
 formData 
=
 
{
 name
:
 
''
,
 email
:
 
''
 
}
;
 
    
const
 dialogId 
=
 
openDialog
(
{
      variant
:
 
'modal'
,
      title
:
 
'Create Account'
,
      
// Focus the name field once the open transition settles. `autoFocus: true`
      
// picks the first focusable field automatically, but only on web — a ref
      
// works on every platform.
      autoFocus
:
 nameRef
,
      content
:
 
(
        
<Block
 
p
=
"md"
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
Fill
 in your details to create an account
.
          
</Text
>
 
          
<Input
            
inputRef
=
{
nameRef
}
            
placeholder
=
"Your name"
            
label
=
"Name"
            
onChangeText
=
{
(
text
)
 
=>
 
{
              formData
.
name 
=
 text
;
            
}
}
          
/>
 
          
<Input
            
placeholder
=
"your@email.com"
            
label
=
"Email"
            
keyboardType
=
"email-address"
            
onChangeText
=
{
(
text
)
 
=>
 
{
              formData
.
email 
=
 text
;
            
}
}
          
/>
 
          
<Row
 
gap
=
"sm"
 
mt
=
"sm"
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
 fullWidth 
variant
=
"secondary"
 
onPress
=
{
(
)
 
=>
 
closeDialog
(
dialogId
)
}
>
                
Cancel
              
</Button
>
            
</Block
>
            
<Block
 
grow
=
{
1
}
>
              
<Button
                fullWidth
                
onPress
=
{
(
)
 
=>
 
{
                  
if
 
(
!
formData
.
name 
||
 
!
formData
.
email
)
 
{
                    
Alert
.
alert
(
'Error'
,
 
'Please fill in all fields'
)
;
                    
return
;
                  
}
 
                  
Alert
.
alert
(
'Success'
,
 
`Account created for ${formData.name}`
)
;
                  
closeDialog
(
dialogId
)
;
                
}
}
                
variant
=
"filled"
              
>
                
Create
 account
              
</Button
>
            
</Block
>
          
</Row
>
        
</Block
>
      
)
    
}
)
;
  
}
;
 
  
return
 
(
    
<Button
 
onPress
=
{
showFormDialog
}
>
Open
 
Form
 
Dialog
</Button
>
  
)
;
}

Title customization

titleProps accepts any <Text> props (ff, weight, tracking, uppercase, size, color, style) and applies them to the dialog header without changing the rest of the chrome. The same prop is also accepted by openDialog({ titleProps }) for imperative dialogs.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Text
,
 useDialog 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
{
 openDialog
,
 closeDialog 
}
 
=
 
useDialog
(
)
;
 
  
const
 open 
=
 
(
titleProps
:
 
any
)
 
=>
 
{
    
const
 id 
=
 
openDialog
(
{
      variant
:
 
'modal'
,
      title
:
 
'Welcome aboard'
,
      titleProps
,
      content
:
 
(
        
<Block
 
p
=
"md"
>
          
<Text
>
Dialog
 title styled via 
`titleProps`
.
</Text
>
          
<Button
 
onPress
=
{
(
)
 
=>
 
closeDialog
(
id
)
}
>
Close
</Button
>
        
</Block
>
      
)
,
    
}
)
;
  
}
;
 
  
return
 
(
    
<Block
>
      
<Button
 
onPress
=
{
(
)
 
=>
 
open
(
undefined
)
}
>
Default
</Button
>
      
<Button
        
onPress
=
{
(
)
 
=>
          
open
(
{
            uppercase
:
 
true
,
            tracking
:
 
1.5
,
            weight
:
 
'700'
,
            size
:
 
'sm'
,
          
}
)
        
}
      
>
        
Uppercase
 tracked
      
</Button
>
      
<Button
        
onPress
=
{
(
)
 
=>
          
open
(
{
            ff
:
 
'Georgia, serif'
,
            size
:
 
'xl'
,
            weight
:
 
'600'
,
          
}
)
        
}
      
>
        
Serif
 headline
      
</Button
>
      
<Button
        
onPress
=
{
(
)
 
=>
          
open
(
{
            color
:
 
'primary'
,
            weight
:
 
'700'
,
            ff
:
 
'monospace'
,
          
}
)
        
}
      
>
        
Brand
-
coloured monospace
      
</Button
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Dialog

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap

Dialog

Basic Modal

Bottom Sheet

Confirmation

Form Dialog

Title customization

react-ui-library