Dialog
OverlaysModal dialog for displaying content that requires user attention. Focus is trapped, Escape closes, and aria attributes are wired automatically.
import { Dialog } from "@cohere-ai/waypoint-ui/dialog";Live Preview
Props
| Name | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | true | Whether to render the × close button (on DialogContent) |
closeOnClickOutside | boolean | true | Whether clicking the overlay closes the dialog |
buttonClassName | string | - | CSS classes for the close button |
overlayClassName | string | - | CSS classes for the backdrop overlay |
container | HTMLElement | - | Portal container target |
Examples
Basic Dialog
Dialog with trigger, header, body, and footer
1 import { 2 Dialog, DialogTrigger, DialogContent, DialogHeader, 3 DialogTitle, DialogDescription, DialogBody, DialogFooter, 4 } from '@cohere-ai/waypoint-ui/dialog'; 5 6 <Dialog> 7 <DialogTrigger asChild> 8 <Button variant="outline">Open dialog</Button> 9 </DialogTrigger> 10 <DialogContent> 11 <DialogHeader> 12 <DialogTitle>Edit profile</DialogTitle> 13 <DialogDescription> 14 Make changes to your profile here. Click save when you're done. 15 </DialogDescription> 16 </DialogHeader> 17 <DialogBody> 18 <Input placeholder="Name" /> 19 </DialogBody> 20 <DialogFooter> 21 <Button type="submit">Save changes</Button> 22 </DialogFooter> 23 </DialogContent> 24 </Dialog>
Without Close Button
Dialog that prevents accidental closure
1 <DialogContent showCloseButton={false} closeOnClickOutside={false}> 2 ... 3 </DialogContent>
Additional Resources
Performance
Metrics measured with production build in Chrome 120.
Accessibility
Keyboard Navigation
Focus trapped within dialog when open. Escape closes by default. Tab cycles through interactive elements.
ARIA Attributes
aria-labelledby wired to DialogTitlearia-describedby wired to DialogDescriptionDesign Guidelines
Do
Use DialogBody to wrap the main content for consistent padding.
Always include a DialogTitle (even if visually hidden) for accessibility.
Don't
Put too much content in a dialog — consider a full page or sheet instead.
Found an Issue?
If you've encountered a bug or have feedback about the Dialog 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.