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#

• 0.9.0 - Fixed dialog backdrop appearance in dark mode. #31673
• 0.8.0 - Adding a new Dialog component to Backstage UI. #31371