5.3.0 • Published 5 years ago
@ds-kit/modal v5.3.0
title: "Modal" slug: "/packages/modal" category: "overlay" componentNames:
- "Modal"
Modal
The modal is a component that displays content in a box overlaying the page.
import Modal from "@ds-kit/modal"
Basic
<Modal disclosure={<Button variant="primary">Open modal</Button>} tabIndex={0}>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
</Modal>
Modal with overflowing content
<Modal disclosure={<Button variant="primary">Open modal</Button>} tabIndex={0}>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>First paragraph</p>
<p>Last paragraph</p>
</div>
</Modal>
Modal with render prop
<Modal disclosure={<Button variant="primary">Open modal</Button>}>
{dialog => (
<div>
<Div>First paragraph</Div>
<Button variant="danger" onClick={() => dialog.hide()}>
Cancel
</Button>
</div>
)}
</Modal>
Different modal sizes
<Div style={{ display: "flex" }}>
<Div mx="1rem">
<Modal
size="sm"
disclosure={<Button variant="primary">Small modal</Button>}
tabIndex={0}
>
<span>Small modal</span>
</Modal>
</Div>
<Div mx="1rem">
<Modal
size="md"
disclosure={<Button variant="primary">Normal modal</Button>}
tabIndex={0}
>
<span>Normal modal</span>
</Modal>
</Div>
<Div mx="1rem">
<Modal
size="lg"
disclosure={<Button variant="primary">Large modal</Button>}
tabIndex={0}
>
<span>Large modal</span>
</Modal>
</Div>
</Div>
5.3.0
5 years ago
5.2.0
5 years ago
5.1.0
5 years ago
5.0.0
5 years ago
4.1.0
5 years ago
4.0.0
5 years ago
3.1.0
5 years ago
3.0.0
5 years ago
2.0.0
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago