Dialog

note

This component is intended for staff-facing use only.

Use a dialog to:

  • have a user confirm a potentially dangerous or destructive action
  • allow a user to "peek" at the details of something without losing the context of the page underneath

Dialogs should only allow a user to take a single action. If many actions are possible, use a whole page instead.

React#

Our dialog component is only compatible with React. It's based on the Reach UI dialog.

import React, { useState } from "react"
import Dialog from "lbh-frontend/lbh/components/lbh-dialog"
const DialogExample = () => {
const [open, setOpen] = useState(false)
return (
<>
<button
onClick={() => setOpen(!open)}
className="govuk-button lbh-button"
>
Preview dialog
</button>
<Dialog
title="Are you sure?"
isOpen={open}
onDismiss={() => setOpen(false)}
>
<p className="lbh-body">The record will be permanently deleted.</p>
<div className="lbh-dialog__actions">
<a href="#" className="govuk-button lbh-button">
Yes, delete
</a>
<button
onClick={() => setOpen(false)}
className="lbh-link lbh-link--no-visited-state"
>
No, cancel
</button>
</div>
</Dialog>
</>
)
}
export default DialogExample