Zetta v0.10

Components · Overlays

Dialog

A modal surface for focused decisions, on a card with shadow-lg elevation over a scrim. Build it on the native <dialog> element, so focus-trap, Escape, and the backdrop come for free.

Preview

The dialog surface across the three themes (note the shadow disappears in Accessibility).

Light
Delete project?
This permanently removes the project and all of its data. This action can't be undone.
Dark
Delete project?
This permanently removes the project and all of its data. This action can't be undone.
Accessibility
Delete project?
This permanently removes the project and all of its data. This action can't be undone.

Live demo

Open a real modal — Tab is trapped inside, Escape and the buttons close it.

Delete project?
This permanently removes the project and all of its data. This action can't be undone.

Spec

Values and token references straight from the Zetta spec.

dialog
backgroundColor
{colors.surface-card}
textColor
{colors.ink}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.base}
shadow
{shadows.lg}
padding
{spacing.page}
maxWidth
480px
width
100%
titleFontFamily
Inter
titleFontSize
18px
titleFontWeight
600
titleLineHeight
1.35
bodyFontFamily
Geist
bodyFontSize
14px
bodyFontWeight
400
bodyColor
{colors.body}
dialog-overlay
backgroundColor
{colors.overlay}

Build with the skill

No package to install — hand this to your AI to generate the dialog in your stack (native <dialog>, or your framework's accessible modal).

Prompt for your AI 
Implement the Zetta "Dialog" component in this project's stack using the zetta-design-md skill.

- Apply the `dialog` spec from the skill (variants: dialog, dialog-overlay).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • Card surface, 1px hairline, 8px radius, 24px padding, shadow-lg; scrim is var(--color-overlay). Max-width 480.
  • Title is Inter 18/600; body Geist 14/400. Actions are right-aligned with the primary/destructive action last.
  • 11Trap focus while open and restore it to the trigger on close (native <dialog> does this for you).

Known gaps

  • Non-modal dialog, scrollable long-content body, and stacked dialogs are not yet specified.