Dialog
draft

A modal dialog for presenting focused content, confirmation flows, and action panels with keyboard focus trapping, backdrop dismissal, and optional header/footer regions.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdDialog } from '@fbin-web/neighborhood-core';
<nbhd-button id="open-dialog-button" variant="primary">
  Open dialog
</nbhd-button>

<nbhd-dialog label="Title for basic dialog " surface="primary">
  <nbhd-text>
    This is a dialog. It can contain any content, but it's up to you to provide it. You can use
    the
  </nbhd-text>
  <div slot="footer">
    <nbhd-button variant="secondary">
      Cancel
    </nbhd-button>
    <nbhd-button variant="primary">
      Confirm
    </nbhd-button>
  </div>
</nbhd-dialog>

<script>
  // Example script to show the dialog programmatically
  document.querySelector('#open-dialog-button').addEventListener('click', () => {
    document.querySelector('nbhd-dialog').show();
  });
</script>

React 

import { useRef } from 'react';
import { NbhdDialog, NbhdButton, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => {
  const dialogRef = useRef(null);

  return (
    <>
    <NbhdButton
      id="open-dialog-button"
      variant="primary"
      onClick={() => dialogRef.current?.show()}>
      Open dialog
    </NbhdButton>

    <NbhdDialog
      ref={dialogRef}
      label="Title for basic dialog "
      surface="primary">
      <NbhdText>
        This is a dialog. It can contain any content, but it's up to you to provide it. You can use
        the
      </NbhdText>
      <div slot="footer">
        <NbhdButton variant="secondary">Cancel</NbhdButton>
        <NbhdButton variant="primary">Confirm</NbhdButton>
      </div>
    </NbhdDialog>
    </>
  );
};

Properties

Property Attribute Type Default Description
label label string Accessible label displayed in the header when no label slot is provided. Prefer this over the native title attribute.
hideHeader hide-header boolean false Hides the dialog header.
open open boolean false Whether the dialog is open.
persistent persistent boolean false Prevents the dialog from closing when clicking the backdrop or pressing Escape.
width width number Sets a custom width for the dialog panel in pixels.
surface surface Surface 'primary' The visual surface token applied to the dialog panel.

Events

Name Description Event Detail
nbhd-dialog-open Emitted after the dialog opens and focus is moved into it. —
nbhd-dialog-close Emitted after the dialog closes and focus is returned to the element that opened it. —

Slots

Name Description
(default) Main dialog body content. The default slot renders inside the body container.
label Optional header label content. When provided, it overrides the label property and is rendered inside the header slot.
footer Optional footer content. This is only rendered when the footer slot is present.

CSS Parts

Name Description
base The outer dialog wrapper around the backdrop and panel.
backdrop The overlay backdrop behind the dialog panel.
panel The dialog panel itself, including the surface styling and content container.
header The dialog header container when the header is visible.
label The label slot container used for the dialog title area.
title The default rendered title element when the label property is used.
body The main body container that wraps the default slot content.
body-slot The default slot element for dialog body content.
footer The footer container when footer content is present.
footer-slot The slot element for dialog footer content.

Dependencies

This component contains the following components as dependencies.