Dialog

Usage

import { 
  Dialog, 
  DialogTrigger, 
  DialogHeader, 
  DialogBody, 
  DialogFooter, 
} from '@backstage/ui';

<DialogTrigger>
  <Button>Open Dialog</Button>
  <Dialog>
    <DialogHeader>Title</DialogHeader>
    <DialogBody>Content</DialogBody>
    <DialogFooter>
      <Button variant="secondary" slot="close">Close</Button>
    </DialogFooter>
  </Dialog>
</DialogTrigger>

API reference

DialogTrigger

Wraps a trigger element and the dialog content to handle open/close state.

Dialog

The main dialog container that renders as a modal overlay.

DialogHeader

Displays the dialog title with a built-in close button.

DialogBody

The main content area of the dialog with optional scrolling.

DialogFooter

Contains action buttons or other footer content.

If you want to close the dialog while pressing a button, you can use the slot="close" prop on the button.

<Button slot="close">Close</Button>

Examples

Fixed Width and Height

Dialog with a fixed height body that scrolls when content overflows.

Dialog with Form

Dialog containing form elements for user input.

Dialog with no trigger and controlled by props

You can also control the dialog using your own states.

const [isOpen, setIsOpen] = useState(false);

<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
  <DialogHeader>Create New User</DialogHeader>
  <DialogBody>
    Your content
  </DialogBody>
  <DialogFooter>
    <Button variant="secondary" slot="close">Cancel</Button>
    <Button variant="primary" slot="close">Create User</Button>
  </DialogFooter>
</Dialog>

Theming

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

• bui-DialogOverlay
• bui-Dialog
• bui-DialogHeader
• bui-DialogHeaderTitle
• bui-DialogBody
• bui-DialogFooter

Changelog