<script>
  import Preview from "../../components/Preview.svelte";
</script>

## Default (transactional)

<FileSource src="/framed/Modal/Modal" />

## Custom focus

By default, the modal close button will be focused when opened.

Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).

<FileSource src="/framed/Modal/ModalCustomFocus" />

## Danger modal

<FileSource src="/framed/Modal/DangerModal" />

## Passive modal

<FileSource src="/framed/Modal/PassiveModal" />

## Has scrolling content

Setting `hasScrollingContent` to `true` increases the vertical space within the modal.

<FileSource src="/framed/Modal/ModalScrollingContent" />

## Multiple modals

<FileSource src="/framed/Modal/ModalMultiple" />

## Multiple secondary buttons

Use the `secondaryButtons` prop to render two secondary buttons. 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" />
