<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" />
