Modal

Use Modal for a confirmation, a short form or any content that needs the customer's attention before continuing. For a side panel, use Drawer.

ExampleCopy Anchor Link

import { useState } from 'react';
import { Modal } from '@salla.sa/twilight-theme-engine/modal';

export function ConfirmClear({ onConfirm }: { onConfirm: () => void }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Clear cart</button>
      <Modal isOpen={open} onClose={() => setOpen(false)} size="sm">
        <Modal.Header onClose={() => setOpen(false)}>Clear the cart?</Modal.Header>
        <Modal.Body>All items will be removed.</Modal.Body>
        <Modal.Footer>
          <button onClick={() => setOpen(false)}>Cancel</button>
          <button onClick={onConfirm}>Clear</button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

You own the open state: the modal only asks you to close it through onClose.

APICopy Anchor Link

Parts: Modal.Header, Modal.Body and Modal.Footer. Each accepts normal div attributes. Modal.Header also takes showCloseButton (default true) and onClose.

GotchasCopy Anchor Link

• The close button in Modal.Header appears only when you pass onClose to the header too.
• Always give the customer a visible way to close it (the header button or your own). Do not rely on a backdrop click alone.
• Clicking, typing and pressing Enter or Space inside the panel never close it, so forms and buttons inside work as usual. Only a backdrop click and Escape call onClose.
• It renders nothing while closed and during server rendering, and uses a portal when open.
• While open it adds the class menu-opened to <body>, and on close focus returns to the element that had it before.
• ImageModal is also exported from this path and loads lazily.

NextCopy Anchor Link

• Drawer is the side panel with the same props.
• toast is for short messages that need no action.
• Layout and components