Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Dialog overview

Headless dialog gives you modal behavior, focus management, and close reason reporting without prescribing panel markup or product styling.

Imports

Bring in only the structural directives you plan to render in your shell.

Headless dialog imports

ts
import {
  TngDialog,
  TngDialogActions,
  TngDialogBackdrop,
  TngDialogClose,
  TngDialogDescription,
  TngDialogPanel,
  TngDialogTitle,
  TngDialogTrigger,
} from '@tailng-ui/primitives';

Basic composition

The root owns open state and behavior; backdrop, panel, title, description, and actions stay semantic.

Headless dialog composition

html
<button type="button" [tngDialogTrigger]="reviewDialog">Review release</button>

<section tngDialog #reviewDialog="tngDialog">
  <div tngDialogBackdrop>
    <section tngDialogPanel>
      <h2 tngDialogTitle>Review changes</h2>
      <p tngDialogDescription>Confirm before publishing.</p>
      <div tngDialogActions>
        <button type="button" tngDialogClose>Cancel</button>
        <button type="button" tngDialogClose [tngDialogClose]="'programmatic'">Publish</button>
      </div>
    </section>
  </div>
</section>

Style variants

The same headless dialog behavior skinned with owner-authored CSS or Tailwind utilities.

Headless dialog with owner-authored CSS

last close reason: none

Accessibility baseline

  • TngDialogPanel provides the dialog role, naming hookup, and panel focus target.
  • Tab and Shift+Tab wrap inside the panel when focus trapping is enabled.
  • Escape closes only when dismissible and closeOnEscape allow it.
  • Owners still choose readable headings, descriptive body copy, and high-contrast action states.