Modal

v1.0.0

Generic dialog modal for focused workflows.

Import

import { Modal } from '@meteorack/sdk-react';

How To Use It

Use it for focused workflows that must temporarily take the user's attention away from the page.
Keep modal flows short and move large configuration surfaces into dedicated pages or drawers.

Works Well With

Button LoadingOverlay Notice

Props

open: boolean

Controls whether the modal is visible.

onClose: () => void

Called when the user closes the dialog via overlay, escape, or close button.

title: string

Heading rendered in the modal header.

children: ReactNode

Main body content rendered inside the scrollable modal area.

footer?: ReactNode

Optional footer actions row, typically populated with Button components.

className?: string

Optional class name applied to the dialog content container.

Example

Modal.tsx

import { useState } from 'react';
import { Modal, Button, Notice } from '@meteorack/sdk-react';

export function ResetThemeAction() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="ghost" onClick={() => setOpen(true)}>
        Reset to defaults
      </Button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Reset to Defaults"
        footer={
          <>
            <Button variant="ghost" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button variant="danger" onClick={() => setOpen(false)}>
              Reset
            </Button>
          </>
        }
      >
        <Notice variant="warning">
          This action overwrites the saved theme configuration.
        </Notice>
      </Modal>
    </>
  );
}

PreviousNotice NextDrawer