LibreChatDialog
Modal dialogs and confirmations.
LibreChat's modal dialog is built from OGDialog and its parts. For a standard dialog with a title, a body and a confirm action, OGDialogTemplate assembles them and adds a localized Cancel button.
import { Button, OGDialog, OGDialogTemplate, OGDialogTrigger } from '@librechat/client'
export default function DialogConfirm() {
return (
<OGDialog>
<OGDialogTrigger asChild>
<Button variant="destructive">Delete conversation</Button>
</OGDialogTrigger>
<OGDialogTemplate
title="Delete conversation?"
className="w-11/12 max-w-md"
main={<p className="text-text-secondary text-sm">This removes it for good.</p>}
selection={{
selectHandler: () => undefined,
selectClasses:
'bg-surface-destructive hover:bg-surface-destructive-hover text-text-on-status',
selectText: 'Delete',
}}
showCancelButton
/>
</OGDialog>
)
}The next release of @librechat/client also exports these parts under plain names (Dialog, DialogContent, DialogTemplate and the rest). They are the same components, so either name works once that release is out.
Parts
| Part | Role |
|---|---|
OGDialog | The root; controls whether the dialog is open. |
OGDialogTrigger | The element that opens it. Use asChild with a Button. |
OGDialogContent | The dialog surface, with an optional close button. |
OGDialogHeader, OGDialogTitle, OGDialogDescription | The heading area. Every dialog needs a title. |
OGDialogFooter, OGDialogClose | The action row and a control that closes the dialog. |
OGDialogTemplate | A complete dialog: title, main, selection and an optional Cancel button. |
Width and dismissal
Constrain a dialog to w-11/12 plus a max-w-* cap so it holds up from desktop to phone, and give it exactly one clear way out: the close button or a Cancel button.
Accessibility
Opening the dialog moves focus into it and keeps focus inside until it closes; closing returns focus to the trigger. For a destructive confirmation, AlertDialog gives screen readers the stronger alertdialog role.
| Key | Action |
|---|---|
| Tab and Shift+Tab | Move between the dialog's controls |
| Escape | Closes the dialog and returns focus to the trigger |
How is this guide?