ResponsiveDialog
OverlaysStable
Automatically renders as a Drawer on mobile and a Dialog (or Popover) on desktop. Ideal for shared desktop/mobile UI.
Quick Import
import { ResponsiveDialog } from "@cohere-ai/waypoint-ui/responsive-dialog";Live Preview
Loading ResponsiveDialog...
Props
| Name | Type | Default | Description |
|---|---|---|---|
desktopMode | 'dialog' | 'popover' | 'dialog' | Component used on desktop |
breakpoint | number | - | Pixel breakpoint for mobile/desktop switch |
showCloseButton | boolean | true | Show close button (on ResponsiveDialogContent) |
closeOnClickOutside | boolean | true | Close on backdrop click |
Examples
Responsive Dialog
Dialog that adapts to Drawer on mobile
1 import { 2 ResponsiveDialog, ResponsiveDialogTrigger, 3 ResponsiveDialogContent, ResponsiveDialogTitle, 4 } from '@cohere-ai/waypoint-ui/responsive-dialog'; 5 6 <ResponsiveDialog> 7 <ResponsiveDialogTrigger asChild> 8 <Button>Open</Button> 9 </ResponsiveDialogTrigger> 10 <ResponsiveDialogContent> 11 <ResponsiveDialogTitle>Settings</ResponsiveDialogTitle> 12 <p>Content adapts to screen size.</p> 13 </ResponsiveDialogContent> 14 </ResponsiveDialog>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the ResponsiveDialog component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.