- Get started
- Component definition
- Designing custom elements
- Development best practices
- Colors
- Typography
- Spacing
- Shadows
- Radii
- Avatar
- Button
- Checkbox
- Dropdown
- FormField
- Icon
- IconButton
- Illustration
- Link
- List
- Loader
- Logo
- Modal
- Pill
- Radio
- Select
- Switch
- Tabs
- Text
- Textarea
- TextButton
- TextInput
- Tooltip
- Align
- Backdrop
- Container
- Distribute
- Layout
- Spacer
- Icon set
- Illustration set
- Forms
- Settings
- Disabled styles
- Plan upgrade
- CSS utilities
- CSS variables
Guides
Styles
Components
Layout
Icons
Illustrations
Patterns
Utilities
Examples
Empty Backdrop
() => {const [isOpen, setIsOpen] = React.useState(false)return (<div><Button onClick={() => setIsOpen(!isOpen)} variant="primary">Open Backdrop</Button><Backdrop isOpen={isOpen}><Container padding="large"><ButtononClick={() => setIsOpen(!isOpen)}variant="primary">Close Backdrop</Button></Container></Backdrop></div>)}
Backdrop with custom card
() => {const [isOpen, setIsOpen] = React.useState(false)return (<div><Button onClick={() => setIsOpen(!isOpen)} variant="primary">Open Backdrop</Button><Backdrop isOpen={isOpen}><divonClick={this.handleClick}style={{ height: '100%', paddingTop: '12vw' }}><divonClick={e => e.stopPropagation()}style={{maxWidth: '40rem',width: '100%',margin: '0 auto',padding: '2rem',backgroundColor: 'white',}}><div>Backdrop content</div><Button onClick={() => setIsOpen(!isOpen)}>Close Backdrop</Button></div></div></Backdrop></div>)}
Props
prop
type
default
required
zIndex
number
1000
backgroundColor
string
'backdrop'
isOpen
bool
children
node