Feedback
Dialog
A focused conversation with escape and focus restoration.
Use it in your project
Install oscl-ui from npm and import oscl-ui/styles.css once. See installation.
dialog-example.tsx
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, Button } from "oscl-ui";
<Dialog>
<DialogTrigger asChild><Button>Open dialog</Button></DialogTrigger>
<DialogContent theme="dark">
<DialogTitle>A little space to focus</DialogTitle>
<DialogDescription>Press Escape to return.</DialogDescription>
</DialogContent>
</Dialog>Accessibility
Keep visible labels and keyboard focus. Supply an accessible name to icon-only actions. Try this preview with Tab, Enter, Space, and Escape where appropriate.
The source, in full
This is the actual source from the isolated OSCL package used by this website. Native props and TypeScript declarations are included in the npm package.
dialog.tsx
"use client";
import * as Primitive from "@radix-ui/react-dialog";
import { forwardRef } from "react";
import type { ComponentPropsWithoutRef, ComponentRef } from "react";
export const Dialog = Primitive.Root;
export const DialogTrigger = Primitive.Trigger;
export const DialogClose = Primitive.Close;
export const DialogTitle = forwardRef<ComponentRef<typeof Primitive.Title>, ComponentPropsWithoutRef<typeof Primitive.Title>>(function DialogTitle({ className = "", ...props }, ref) {
return <Primitive.Title {...props} ref={ref} className={`oscl-dialog-title ${className}`} />;
});
export const DialogDescription = forwardRef<ComponentRef<typeof Primitive.Description>, ComponentPropsWithoutRef<typeof Primitive.Description>>(function DialogDescription({ className = "", ...props }, ref) {
return <Primitive.Description {...props} ref={ref} className={`oscl-dialog-description ${className}`} />;
});
export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Primitive.Content> {
theme?: "light" | "dark";
}
export const DialogContent = forwardRef<ComponentRef<typeof Primitive.Content>, DialogContentProps>(function DialogContent({ className = "", children, theme, ...props }, ref) {
return <Primitive.Portal><Primitive.Overlay className="oscl-dialog-overlay" />
<Primitive.Content {...props} ref={ref} data-oscl-theme={theme} className={`oscl-dialog-content ${className}`}>
{children}
<Primitive.Close className="oscl-dialog-dismiss" aria-label="Close dialog">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
</Primitive.Close>
</Primitive.Content>
</Primitive.Portal>;
});