The Modal component is used to display content in a focused overlay layer, helping users complete tasks such as confirmations, forms, or alerts without leaving the current context.

• Overlay-based UI: Focuses user attention on critical content.
• Controlled state: Open/close is managed externally via props.
• Composable structure: Supports header, content, and actions sections.
• Accessible behavior: Designed for keyboard and interaction safety.

Usage Example

Preview

Open Modal

Code

<script lang="ts">
  import { Button, Modal } from "@fefade-ui/svelte"
  import { onMount } from "svelte"

  let isOpen = $state(false)

  function handleClose() {
    isOpen = false
  }

  onMount(() => {
    isOpen = true
  })
</script>

<Modal {isOpen} {handleClose}>
  <Modal.Header {handleClose} align="center">
    <h2>test header</h2>
  </Modal.Header>
  <Modal.Content>
    <p>test content</p>
  </Modal.Content>
  <Modal.Actions class="border-0" align="center" style="align-items: baseline;">
    <Button variant="outlined" onclick={handleClose}>Cancel</Button>
    <Button>Save</Button>
  </Modal.Actions>
</Modal>

<Button
  onclick={() => {
    isOpen = !isOpen
  }}
>
  Open Modal
</Button>

Props

Modal

Prop	Type	Default	Description
isOpen	boolean	false	Controls whether the modal is visible.
handleClose	function	—	Callback executed when the modal requests to close.

Modal.Header

Prop	Type	Default	Description
align	string	"left"	Controls header content alignment.
class	string	—	Optional additional styles.
style	string	—	Inline style overrides.

Modal.Content

Prop	Type	Default	Description
class	string	—	Optional styling for modal body.
style	string	—	Inline style overrides.

Modal.Actions

Prop	Type	Default	Description
align	string	"right"	Aligns action buttons within the footer.
class	string	—	Optional styling for actions container.
style	string	—	Inline style overrides.

Best Practices

• Keep modal content focused and task-oriented.
• Always provide a clear way to close the modal (handleClose).
• Avoid placing too many actions inside Modal.Actions.
• Use Modal.Header for context and clarity.
• Ensure keyboard accessibility and proper focus handling.