Modal

Capture user attention and display important information or actions using rothko ui's Modal component. Create modal dialogs or pop-ups that overlay the main content, ensuring focus and guiding users through specific tasks or interactions.

View Source

Import

import { Modal } from '@rothko-ui/react';

Usage

Blur

Props

NameTypeDefaultDescription
Name
className
Type
string
Default
 
Description
CSS class name(s).
Name
onClose
Type
() => void
Default
 
Description
The callback function called when the modal is closed.
Name
open
Type
boolean
Default
 
Description
Whether the modal is open or closed.
Name
size
Type
'xs' | 's' | 'm' | 'l'
Default
'm'
Description
Size of the modal
Name
style
Type
CSSProperties
Default
 
Description
The inline style for the modal.
Name
title
Type
string
Default
 
Description
The title of the modal.
Name
variant
Type
'shaded' | 'none' | 'blur'
Default
'shaded'
Description
Variant of the backdrop.