Under 768px wide it opens as a Drawer from the bottom, which can be swiped down to close. From 768px up it opens as a centred Dialog. Change the width with breakpoint.
Body gets side padding and scrolls on the drawer, and sits in the dialog's own padding on desktop. Footer stacks its buttons on the drawer and lines them up on the right on desktop.
The dialog shows a close button in the corner. The drawer has a handle instead. Pass showCloseButton={false} to hide the one on the dialog, or pass your own button as closeButton. Add closeOnDrawer to show your button on the drawer too.
For content that opens on its own banner instead of a header, like a player or contact card, set banner on the content. The parts sit with no gap and the drawer starts closer to the handle. ResponsiveDialogBannerClose is a white close button that sits on a dark banner. Keep a title and description for screen readers with className="sr-only".
ResponsiveDialog. Takes open, defaultOpen and onOpenChange like Dialog. breakpoint sets the width in pixels where it turns into a dialog. sounds plays the open and close cues, on by default. repositionInputs is passed to the drawer.
ResponsiveDialogContent.showCloseButton, closeButton and closeOnDrawer control the close button. banner is for content that opens on a banner. drawerClassName and dialogClassName style one mode only.
Other parts. Trigger, Header, Title, Description, Body, Footer and Close. Each renders the Drawer or Dialog part for the current mode and keeps its data-slot.