Dialog | Components | Neighborhood Design System

Selected Brand

Loading

Code

import { NbhdDialog } from '@fbin-web/neighborhood-core';

<nbhd-dialog> dialog </nbhd-dialog>

import { NbhdDialog } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdDialog>dialog</NbhdDialog>
  </>
);

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Whether the dialog is open.
`label`	`label`	`string`		The dialog's label displayed in the header.
`noHeader`	`no-header`	`boolean`	`false`	Hides the dialog header.
`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.

Name	Description	Event Detail
`nbhd-dialog-open`	Emitted when the dialog is opened.	—
`nbhd-dialog-close`	Emitted when the dialog is closed.	—

Name	Description
(default)	Default content area (body of the dialog).
`label`	Slot for the dialog title. Overrides the label property when used.
`footer`	Content area for the dialog footer.

Name	Description
`base`	The component's base wrapper.
`backdrop`	The overlay backdrop behind the dialog panel.
`header`	The dialog header container.
`label`	The slot container used for the dialog label area.
`title`	The default title element rendered from the label property.
`body`	The dialog body content container.
`footer`	The dialog footer container.

This component contains the following components as dependencies.