Dialog

npm install @fbin-web/neighborhood-core

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>

npm install @fbin-web/neighborhood-react

import { NbhdDialog } from '@fbin-web/neighborhood-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>
    </>
  );
};