Icon setIcons
Illustration setIllustrations
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