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.


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 (
onClick={() => setOpen(!open)}
className="govuk-button lbh-button"
Preview dialog
title="Are you sure?"
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
onClick={() => setOpen(false)}
className="lbh-link lbh-link--no-visited-state"
No, cancel
export default DialogExample