<a href="http://localhost:3000" class="svelte-1lb2d7q"><!-- HTML_TAG_START --><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path></svg><!-- HTML_TAG_END --> </a> <div data-svelte-h="svelte-co5qnq">X UI</div>

Modal

Display a modal dialog box, providing a title and content area.

Examples

Use as a component

Setting component prop to true will apply default styles.

Ignore the internal logic with static property

Use as a composable

Component API

Modal

Prop Description Type Default
component If the value is false only children of the main component will be rendered boolean false
isStatic If true the components becomes a shell and ignores all the internal logic boolean false
isOpen Whether the modal is visible or not boolean false
title Title of the modal string
onClose Triggers when the modal is closed function () => {}

Modal Button

Prop Description Type Default
onButtonClick Triggers when the button is clicked function () => {}