Usage
import { Modal } from '@loomhq/lens'
<Modal title="Title>Content</Modal>
Examples
Modal with all elements
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Modal
mainButton={<Button variant="primary">Confirm</Button>}
secondaryButton={<Button>Cancel</Button>}
alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
title={demoText.short}
isOpen={isOpen}
onCloseClick={() => setIsOpen(!isOpen)}
onBackgroundClick={() => setIsOpen(!isOpen)}
>
{demoText.medium}
</Modal>
</>
)}
Modal with custom content
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Modal
isOpen={isOpen}
onCloseClick={() => setIsOpen(!isOpen)}
onBackgroundClick={() => setIsOpen(!isOpen)}
>
<Text>Some label</Text>
<Spacer bottom={0.5} />
<Layout gap="small">
<Layout.Section>
<TextInput placeholder="Type something" />
</Layout.Section>
<Layout.Section width="auto">
<Button variant="primary">Add</Button>
</Layout.Section>
</Layout>
</Modal>
</>
)}
Modal with long content and dividers
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Modal
hasDividers
mainButton={<Button variant="primary">Confirm</Button>}
secondaryButton={<Button>Cancel</Button>}
alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
title={demoText.short}
isOpen={isOpen}
onCloseClick={() => setIsOpen(!isOpen)}
onBackgroundClick={() => setIsOpen(!isOpen)}
>
{demoText.alphabet.map((letter, index) => (
<Container
paddingTop="small"
paddingBottom="small"
borderSide="bottom"
key={index}
>{letter}</Container>
))}
</Modal>
</>
)}
Props