The Modal component provides a flexible and customizable way to display overlay content, perfect for dialogs, alerts, or any content that requires user interaction without leaving the current page.
About
Modals are versatile UI elements used to present important information or interactive content in a focused overlay. They help keep users engaged by keeping the main interface visible in the background while drawing attention to the modal content. The Modal component in theui-svelte offers various customization options, including animations, backdrops, and event handling, ensuring it fits seamlessly into your application's design and functionality.
Example
To use the Modal component, you need to import it into your Svelte file. This setup allows you to easily integrate the Modal component into your project.
<script>
import { Modal } from "theui-svelte";
</script>
<Modal label="Modal Button">
Hello Modal!
</Modal>Modal Trigger
The Modal trigger is the element that opens the Modal when clicked. You can create this trigger using either the label prop or the label snippet. The label prop generates a default button with the provided text, making it simple to open the Modal. Alternatively, the label snippet lets you customize the trigger with any element or component, giving you more flexibility.
Trigger with the label prop
<Modal label="Modal Trigger"> ... </Modal>Trigger with the label snippet
<Modal>
{#snippet label()}
<Button>Modal Trigger</Button>
{/snippet}
...
</Modal>Modal Content
The content placed directly inside the <Modal> tag will be displayed as the main body of the Modal. Additionally, the Modal component supports two snippet blocks for custom header and footer content: header and footer.
- The
headersnippet is used to define the header section of the Modal. - The
footersnippet is used to define the footer section of the Modal.
<Modal label="Modal Content">
{#snippet header()}
<h4 class="font-bold text-lg">THIS IS HEADER!</h4>
{/snippet}
Modal content!
{#snippet footer()}
<p class="text-muted">This is footer</p>
{/snippet}
</Modal>Positioning
The position prop in the Modal component determines where the modal is displayed vertically on the screen. It can be set to 'top', 'center', or 'bottom', with the default being 'center'. This allows you to align the modal according to your design needs, whether you want it at the top for quick alerts, in the center for standard dialogs, or at the bottom for additional content.
<!-- Top-aligned Modal -->
<Modal position="top"> ... </Modal>
<!-- Centered Modal (Default) -->
<Modal position="center"> ... </Modal>
<!-- Bottom-aligned Modal -->
<Modal position="bottom"> ... </Modal>Sizing
The size prop controls the width of the Modal. Options include 'sm' for small, 'md' for medium (default), 'lg' for large, and 'full' for full-screen. This allows you to adjust the modal size based on your content needs.
<!-- Small Modal -->
<Modal size="sm"> ... </Modal>
<!-- Medium-sized Modal (default) -->
<Modal size="md"> ... </Modal>
<!-- Large Modal -->
<Modal size="lg"> ... </Modal>
<!-- Full-width Modal -->
<Modal size="full"> ... </Modal>Animation
Animation Type
The animation prop defines the type of animation used when the Modal opens or closes. Available options include 'slide-down', 'slide-up', 'fade', 'zoom-in', and 'zoom-out'. Each option provides a different visual effect for how the Modal appears or disappears.
<!-- Modal with slide-down animation -->
<Modal animation="slide-down"> ... </Modal>
<!-- Modal with slide-up animation -->
<Modal animation="slide-up"> ... </Modal>
<!-- Modal with fade (default) animation -->
<Modal animation="fade"> ... </Modal>
<!-- Modal with zoom-in animation -->
<Modal animation="zoom-in"> ... </Modal>
<!-- Modal with zoom-out animation -->
<Modal animation="zoom-out"> ... </Modal>Animation Speed
The animate prop controls the speed of the Modal's animation. It accepts the following values: false, 'slower', 'slow', 'normal', 'fast', and 'faster'. Setting this prop to false will disable the animation, while the other values adjust the animation speed accordingly.
<!-- Modal with slower animation -->
<Modal animate="slower"> ... </Modal>
<!-- Modal with slow animation -->
<Modal animate="slow"> ... </Modal>
<!-- Modal with normal speed (default) animation -->
<Modal animate="normal"> ... </Modal>
<!-- Modal with fast animation -->
<Modal animate="fast"> ... </Modal>
<!-- Modal with faster animation -->
<Modal animate="faster"> ... </Modal>
<!-- Modal with no animation -->
<Modal animate={false}> ... </Modal>Modal Backdrop
Static Backdrop
The staticBackdrop prop controls whether the Modal closes when clicking on the backdrop. By default, the backdrop is clickable, and clicking it will close the Modal. Setting staticBackdrop to true makes the backdrop static, meaning the Modal will remain open even when the backdrop is clicked.
<Modal staticBackdrop={true}> ... </Modal>Backdrop Customization
The backdrop prop manages the visibility and style of the Modal's backdrop. When set to true (default), the backdrop is visible. If set to false, the backdrop will be hidden. You can also customize the backdrop by passing custom CSS classes, which will apply directly to the backdrop.
<!-- Modal with no backdrop -->
<Modal backdrop={false}> ... </Modal>
<!-- Modal with custom styled backdrop -->
<Modal backdrop="bg-brand-primary-500/30"> ... </Modal>Disable Close Button
The closeButton prop allows you to control the visibility of the close button in the Modal. By default, the close button is hidden (false). Set this prop to true to display the close button, giving users an easy way to close the modal.
<Modal closeButton={false}> ... </Modal>Modal Open State
The modalOpen prop controls whether the Modal is visible when the page loads. By default, modalOpen is set to false, meaning the Modal is hidden initially. If you set modalOpen to true, the Modal will be open and visible as soon as the page loads.
<Modal modalOpen={true}> ... </Modal>Customization
To create a custom-styled modal, you can use the following props to apply custom classes to the modal's header, body, footer, and outer container:
modalHeaderClasses: Customize the header section of the modal.modalBodyClasses: Customize the body section of the modal.modalFooterClasses: Customize the footer section of the modal.
These props allow you to apply your own styles or use TailwindCSS classes to control the layout and appearance of different parts of the modal.
<Modal
modalBodyClasses="bg-blue-100 dark:bg-blue-950 text-blue-800 dark:text-blue-300 border-blue-500/50 border-4 py-8"
modalHeaderClasses="bg-blue-400/50 text-blue-600 dark:text-blue-100 shadow-blue-500/50 rounded-md p-4 border-0 shadow-md text-lg font-bold"
modalFooterClasses="border-blue-300/50 border rounded-xl p-2"
>
{#snippet label()}
<Button label="Modal Button" />
{/snippet}
{#snippet header()}
<h4>Custom Modal Header</h4>
{/snippet}
.....
{#snippet footer()}
<Button class="bg-warning-500 hover:bg-warning-600 text-warning-900" size="sm">Close</Button>
{/snippet}
</Modal>Accessibility
The modal component is designed with accessibility in mind, ensuring it can be used by everyone, including users relying on assistive technologies. By default, it includes the necessary ARIA attributes and supports keyboard navigation.
- ARIA Attributes: The Modal uses
role="dialog"by default to indicate its purpose to assistive technologies. You can addaria-labelledbyandaria-describedbyattributes to associate the title and content with the Modal. - Keyboard Navigation
- Focus is automatically moved to the Modal when it opens.
- Users can navigate through focusable elements using the tab key.
- Pressing the Esc key closes the Modal.
- Focus Management: Focus is trapped within the Modal while it is open, ensuring users cannot interact with elements outside of it. When the Modal is closed, focus returns to the triggering element.
- Screen Reader Announcements: The Modal is announced as a dialog to screen readers, helping users understand its purpose.
- Color Contrast: Ensure that text and background colors inside the Modal meet WCAG contrast ratio standards .