Dialog — Slotr Docs

React component

Most products open booking from a button, in a modal. <BookingCalendar.Dialog> is that modal, already built: a transparent, full-viewport canvas over a dimmed overlay, so the widget's own open/close animation plays instead of being boxed in. Drive it with your own state.

Dialog.tsx

Loading preview…

import { useState } from "react";
import { BookingCalendar } from "@slotr/react/booking-calendar";

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ display: "flex", justifyContent: "center", padding: 24 }}>
      <button
        onClick={() => setOpen(true)}
        style={{
          padding: "10px 18px",
          borderRadius: 10,
          border: "1px solid #2a2e37",
          background: "#17191f",
          color: "#f2f3f5",
          fontSize: 14,
          fontWeight: 500,
          cursor: "pointer",
        }}
      >
        Book now
      </button>
      <BookingCalendar.Dialog open={open} onOpenChange={setOpen}>
        <BookingCalendar id={DEMO_ID} />
      </BookingCalendar.Dialog>
    </div>
  );
}

Inside <BookingCalendar.Dialog> the calendar is never full width, even if you pass width="full". The dialog is the big canvas; the widget stays boxed.

Controlled or uncontrolled

Pass open + onOpenChange to control it yourself (above), or defaultOpen to let it manage its own state. The overlay click, the Esc key, and the built-in close button all request a close through onOpenChange.

Prop

Type

Controlled or uncontrolledCopy Anchor Link

On this page

Controlled or uncontrolled