Modal

A Warcraft-themed modal dialog built on top of Card. Supports backdrop click dismiss, Escape key, and both default and sm sizes.

Default

Small

Usage

<script>
  import {
    Modal, ModalTrigger, ModalContent,
    CardHeader, CardTitle, CardDescription,
    CardContent, CardFooter, Button
  } from 'warcraftcn-ui-svelte';

  let isOpen = $state(false);
</script>

<Modal bind:open={isOpen}>
  <ModalTrigger>
    <Button>Open Modal</Button>
  </ModalTrigger>
  <ModalContent>
    <CardHeader>
      <CardTitle>Quest Offer</CardTitle>
      <CardDescription>A mysterious task...</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Retrieve the enchanted amulet.</p>
    </CardContent>
    <CardFooter>
      <Button variant="frame" onclick={() => isOpen = false}>Accept Quest</Button>
    </CardFooter>
  </ModalContent>
</Modal>

Props

ModalContent

Prop	Type	Default
size	"default" \| "sm"	"default"

Modal

Prop	Type	Default
open	boolean (bindable)	false
class	string	""

ModalTrigger

Prop	Type
class	string