carbon-components-svelte/docs/src/pages/components/Modal.svx
2022-01-29 09:35:08 -08:00

47 lines
1.1 KiB
Text

<script>
import Preview from "../../components/Preview.svelte";
</script>
### Default (transactional)
<FileSource src="/framed/Modal/Modal" />
### Danger modal
<FileSource src="/framed/Modal/DangerModal" />
### Passive modal
<FileSource src="/framed/Modal/PassiveModal" />
### Multiple modals
<FileSource src="/framed/Modal/ModalMultiple" />
### Multiple secondary buttons
Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonModal" />
### Extra-small size
<FileSource src="/framed/Modal/ModalExtraSmall" />
### Small size
<FileSource src="/framed/Modal/ModalSmall" />
### Large size
<FileSource src="/framed/Modal/ModalLarge" />
### Prevent close on outside click
`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
### Button with icon
<FileSource src="/framed/Modal/ModalButtonWithIcon" />