- Get started
- Component definition
- Designing custom elements
- Development best practices
- Colors
- Typography
- Spacing
- Shadows
- Radii
- Avatar
- Button
- Checkbox
- ColorPicker
- Dropdown
- FormField
- Icon
- IconButton
- Illustration
- Link
- List
- Loader
- Logo
- Menu
- Modal
- Pill
- Radio
- Select
- Switch
- Tabs
- Text
- Textarea
- TextButton
- TextInput
- Toast
- Tooltip
- Align
- Arrange
- Backdrop
- Container
- Popover
- Spacer
- Split
- Icon set
- Illustration set
- Disabled styles
- Forms
- Discovery
- Plan upgrade
- Settings
- CSS utilities
- CSS variables
- Responsive
- Layout recipes
- Showcase
Guides
Styles
Components
Layout
Icons
Illustrations
Patterns
Utilities
Playground
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} onClick={() => setIsOpen(false)}><ContaineronClick={this.handleClick}height="100%"paddingTop="12vw"><ContaineronClick={e => e.stopPropagation()}maxWidth={80}width="100%"margin="0 auto"padding="large"backgroundColor="white"radius="medium"shadow="large"><div>Backdrop content</div><Button onClick={() => setIsOpen(!isOpen)}>Close Backdrop</Button></Container></Container></Backdrop></div>)}
Props
name
type
default
zIndex
number
1000
backgroundColor
string
'backdropDark'
isOpen
boolean
children
React.ReactNode