Component

Dialog

Accessible dialog with CDK Overlay, focus trap, Escape to close and support for sm, md, lg and fullscreen sizes.

import { NeuDialogComponent } from '@neural-ui/core/modal';

Small

Medium

Large

Block close

Form with footer

Internal scroll

import { NeuDialogComponent } from '@neural-ui/core/modal';
import { NeuButtonComponent } from '@neural-ui/core/button';

@Component({
  imports: [NeuDialogComponent, NeuButtonComponent],
  template: `
    <button neu-button (click)="open.set(true)">Open dialog</button>

    <neu-dialog
      [open]="open()"
      title="Confirm action"
      size="sm"
      layout="auto"
      [responsive]="true"
      [restoreFocus]="true"
      (closed)="open.set(false)"
    >
      <p>Are you sure you want to continue?</p>
      <div neu-dialog-footer>
        <button neu-button variant="ghost" (click)="open.set(false)">Cancel</button>
        <button neu-button (click)="open.set(false)">Confirm</button>
      </div>
    </neu-dialog>
  `,
})
export class MyComponent {
  open = signal(false);
}