Kappa / Dialog Layout

<template>
  <DialogLayout.Root>
    <DialogLayout.Trigger as-child>
      <Button variant="primary">Configure deployment</Button>
    </DialogLayout.Trigger>
    <DialogLayout.Content :show-close-button="false">
      <DialogLayout.Header>
        <DialogLayout.Title>Configure deployment</DialogLayout.Title>
        <DialogLayout.Description>Review the release target.</DialogLayout.Description>
      </DialogLayout.Header>
      <DialogLayout.Body>Deployment settings...</DialogLayout.Body>
      <DialogLayout.Actions dismiss-label="Cancel">
        <DialogLayout.Close as-child>
          <DialogLayout.Actions.Primary>Deploy</DialogLayout.Actions.Primary>
        </DialogLayout.Close>
      </DialogLayout.Actions>
    </DialogLayout.Content>
  </DialogLayout.Root>
</template>

Installation

Barrel

import { DialogLayout } from "@dicehub/kappa";

Granular

import {
  DialogLayout,
  DialogLayoutBody,
  DialogLayoutContent,
} from "@dicehub/kappa/components/dialog-layout";

Usage

Use DialogLayout when a dialog needs stable title and action regions. Put all variable-height content in Body. Use the basicDialog for free-form content.

<script setup lang="ts">
import { Button } from "@dicehub/kappa/components/button";
import { DialogLayout } from "@dicehub/kappa/components/dialog-layout";
</script>

<template>
  <DialogLayout.Root>
    <DialogLayout.Trigger as-child>
      <Button>Open settings</Button>
    </DialogLayout.Trigger>
    <DialogLayout.Content :show-close-button="false">
      <DialogLayout.Header>
        <DialogLayout.Title>Run settings</DialogLayout.Title>
        <DialogLayout.Description>Changes apply to the next run.</DialogLayout.Description>
      </DialogLayout.Header>
      <DialogLayout.Body>Settings form...</DialogLayout.Body>
      <DialogLayout.Actions dismiss-label="Cancel">
        <DialogLayout.Close as-child>
          <DialogLayout.Actions.Primary>Save</DialogLayout.Actions.Primary>
        </DialogLayout.Close>
      </DialogLayout.Actions>
    </DialogLayout.Content>
  </DialogLayout.Root>
</template>

Composition

Typical part hierarchy

DialogLayout.Root / DialogLayout.Alert
├── DialogLayout.Trigger
└── DialogLayout.Content
    ├── DialogLayout.Header
    │   ├── DialogLayout.Title
    │   └── DialogLayout.Description
    ├── DialogLayout.Body (only scroll region)
    └── DialogLayout.Actions
        ├── automatic dismiss action
        └── DialogLayout.Actions.Primary

Ark UI Dialog owns open state, focus trapping, modality, dismissal, aria relationships, and nested layers. Dialog Layout reuses Kappa Dialog and adds only the structural regions and action style.

DialogLayout and DialogLayout.Root are the same root.
Alert uses the existing Kappa alert-dialog behavior.
Set show-close-button="false" when the action row owns dismissal.
Wrap a successful primary action with Close as-child, or close controlled state after asynchronous work succeeds.

<template>
  <DialogLayout.Root>
    <DialogLayout.Trigger />
    <DialogLayout.Content>
      <DialogLayout.Header>
        <DialogLayout.Title />
        <DialogLayout.Description />
      </DialogLayout.Header>
      <DialogLayout.Body />
      <DialogLayout.Actions>
        <DialogLayout.Actions.Primary />
      </DialogLayout.Actions>
    </DialogLayout.Content>
  </DialogLayout.Root>
</template>

Examples

Informational

Omit the action row when the corner close control is enough.

<template>
  <DialogLayout.Content size="sm">
    <DialogLayout.Header>
      <DialogLayout.Title>Result archive ready</DialogLayout.Title>
      <DialogLayout.Description>Available for 30 days.</DialogLayout.Description>
    </DialogLayout.Header>
    <DialogLayout.Body>Archive details...</DialogLayout.Body>
  </DialogLayout.Content>
</template>

Confirmation

Alert mode requires an explicit decision and blocks outside pointer dismissal.

<template>
  <DialogLayout.Alert>
    <DialogLayout.Content :show-close-button="false" size="sm">
      <DialogLayout.Header>
        <DialogLayout.Title>Delete result?</DialogLayout.Title>
        <DialogLayout.Description>This action cannot be undone.</DialogLayout.Description>
      </DialogLayout.Header>
      <DialogLayout.Body>Run 4816 will be removed permanently.</DialogLayout.Body>
      <DialogLayout.Actions dismiss-label="Cancel">
        <DialogLayout.Close as-child>
          <DialogLayout.Actions.Primary variant="destructive">
            Delete result
          </DialogLayout.Actions.Primary>
        </DialogLayout.Close>
      </DialogLayout.Actions>
    </DialogLayout.Content>
  </DialogLayout.Alert>
</template>

Scrollable Body

The header and action row stay visible while only the body scrolls.

<template>
  <DialogLayout.Content :show-close-button="false">
    <DialogLayout.Header>
      <DialogLayout.Title>Run audit log</DialogLayout.Title>
    </DialogLayout.Header>
    <DialogLayout.Body tabindex="0">Long event list...</DialogLayout.Body>
    <DialogLayout.Actions dismiss-label="Done">
      <span>16 events</span>
    </DialogLayout.Actions>
  </DialogLayout.Content>
</template>

Pending Work

Keep the primary label visible, show progress, and disable user dismissal while work is pending.

<template>
  <DialogLayout.Root
    v-model:open="open"
    :close-on-escape="!saving"
    :disable-pointer-dismissal="saving"
  >
    <DialogLayout.Content :show-close-button="false">
      <DialogLayout.Header><DialogLayout.Title>Deploy solver image</DialogLayout.Title></DialogLayout.Header>
      <DialogLayout.Body>Deployment details...</DialogLayout.Body>
      <DialogLayout.Actions dismiss-label="Cancel" :dismiss-disabled="saving">
        <DialogLayout.Actions.Primary :loading="saving" @click="deploy">
          {{ saving ? "Deploying" : "Deploy" }}
        </DialogLayout.Actions.Primary>
      </DialogLayout.Actions>
    </DialogLayout.Content>
  </DialogLayout.Root>
</template>

Top Aligned

Place a tall technical workflow near the top of a desktop viewport.

<template>
  <DialogLayout.Content vertical-align="top">
    <DialogLayout.Header><DialogLayout.Title>Validation warnings</DialogLayout.Title></DialogLayout.Header>
    <DialogLayout.Body>Warnings...</DialogLayout.Body>
  </DialogLayout.Content>
</template>

Accessibility

Render one visible Title and normally one Description.
Use Alert only for an urgent decision or acknowledgement.
Give a long text-only body tabindex="0" so keyboard users can scroll it.
Disable Escape, outside dismissal, and the dismiss action while irreversible work is pending.
Translate closeLabel and dismissLabel.

API Reference

DialogLayout.Content

Prop	Type	Default	Description
`size`	`"sm" \| "base" \| "lg" \| "xl"`	`"base"`	Sets the desktop width.
`verticalAlign`	`"center" \| "top"`	`"center"`	Sets desktop placement. Mobile placement stays at the bottom.
`showCloseButton`	`boolean`	`true`	Shows the corner close control. Disable it when an action row owns dismissal.
`closeLabel`	`string`	`"Close dialog"`	Labels the corner close control.
`showBackdrop`	`boolean`	`true`	Renders the modal backdrop.
`teleport / teleportTo`	`boolean / Teleport target`	`true / "body"`	Controls the portal destination.

DialogLayout.Actions

Prop	Type	Default	Description
`dismissLabel`	`string`	`"Close"`	Labels the automatic dismiss action.
`dismissDisabled`	`boolean`	`false`	Disables the dismiss action during pending work.

DialogLayout.Actions.Primary

Prop	Type	Default	Description
`variant`	`"primary" \| "destructive"`	`"primary"`	Sets normal or destructive emphasis.
`loading`	`boolean`	`false`	Shows progress and disables activation.
`disabled`	`boolean`	`false`	Disables activation.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"sm"`	Sets action height.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Sets native button behavior.

Parts

Part	Element	Description
`DialogLayout.Root`	`renderless`	Reuses Dialog state, focus, modality, and dismissal behavior.
`DialogLayout.Alert`	`renderless`	Uses the alertdialog role and protected outside dismissal.
`DialogLayout.Trigger`	`button`	Opens the layout.
`DialogLayout.Content`	`div`	Owns the constrained surface and responsive placement.
`DialogLayout.Header`	`header`	Keeps title and description visible above the scroll region.
`DialogLayout.Title / Description`	`h2 / p`	Provide the accessible name and supporting description.
`DialogLayout.Body`	`div`	Contains the only scrolling content region.
`DialogLayout.Actions`	`footer`	Provides a fixed dismiss action and primary slot.
`DialogLayout.Actions.Primary`	`button`	Renders a loading-aware primary or destructive Button.
`DialogLayout.Close`	`button`	Closes from a custom control or wraps the primary action after success.

Exports

Export	Description
`DialogLayout`	Compound component with all layout parts.
`DialogLayoutRoot / DialogLayoutContent / DialogLayoutBody …`	Named component exports.
`DialogLayoutContentProps / DialogLayoutActionsProps`	Public layout contracts.
`DIALOG_LAYOUT_VERTICAL_ALIGNS`	Readonly supported desktop placements.