YA Dialog

A modal dialog component for displaying content that requires user attention or interaction

The YaDialog is a modal window component in the YaVendio Design System. It overlays the main content and requires user interaction before returning to the application. Perfect for forms, confirmations, alerts, and any content that needs focused attention.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-dialog

npx shadcn@latest add @yavendio/ya-dialog

yarn dlx shadcn@latest add @yavendio/ya-dialog

import {
  YaDialog,
  YaDialogTrigger,
  YaDialogContent,
  YaDialogHeader,
  YaDialogTitle,
  YaDialogDescription,
  YaDialogBody,
  YaDialogFooter,
  YaDialogClose,
} from '@/components/ui/ya-dialog'

export default function Example() {
  return (
    <YaDialog>
      <YaDialogTrigger asChild>
        <button>Open Dialog</button>
      </YaDialogTrigger>
      <YaDialogContent>
        <YaDialogHeader>
          <YaDialogTitle>Dialog Title</YaDialogTitle>
          <YaDialogDescription>
            Dialog description goes here.
          </YaDialogDescription>
        </YaDialogHeader>
        <YaDialogBody>
          Your content here
        </YaDialogBody>
        <YaDialogFooter>
          <YaDialogClose asChild>
            <button>Close</button>
          </YaDialogClose>
        </YaDialogFooter>
      </YaDialogContent>
    </YaDialog>
  )
}

Basic Usage

<YaDialog>
  <YaDialogTrigger asChild>
    <YaButton variant="primary">Open Dialog</YaButton>
  </YaDialogTrigger>
  <YaDialogContent>
    <YaDialogHeader>
      <YaDialogTitle>Edit profile</YaDialogTitle>
      <YaDialogDescription>
        Make changes to your profile here. Click save when you're done.
      </YaDialogDescription>
    </YaDialogHeader>
    <YaDialogBody>
      <YaInput label="Name" placeholder="Enter your name" />
      <YaInput label="Username" placeholder="Enter your username" />
    </YaDialogBody>
    <YaDialogFooter>
      <YaDialogClose asChild>
        <YaButton variant="tertiary">Cancel</YaButton>
      </YaDialogClose>
      <YaDialogClose asChild>
        <YaButton variant="secondary">Save</YaButton>
      </YaDialogClose>
    </YaDialogFooter>
  </YaDialogContent>
</YaDialog>

Sizes

YaDialog supports multiple sizes to accommodate different content needs:

Size	Max Width	Usage
`sm`	400px	Simple confirmations, alerts
`default`	520px	Standard forms, most dialogs
`lg`	720px	Complex forms, data tables
`xl`	900px	Rich content, dashboards
`full`	100vw - 2rem	Full-width content

<YaDialogContent size="sm">...</YaDialogContent>
<YaDialogContent size="default">...</YaDialogContent>
<YaDialogContent size="lg">...</YaDialogContent>

With Form

A common pattern for dialogs with form inputs:

<YaDialog>
  <YaDialogTrigger asChild>
    <YaButton variant="primary">Edit Profile</YaButton>
  </YaDialogTrigger>
  <YaDialogContent>
    <YaDialogHeader>
      <YaDialogTitle>Edit profile</YaDialogTitle>
      <YaDialogDescription>
        Make changes to your profile here. Click save when you're done.
      </YaDialogDescription>
    </YaDialogHeader>
    <YaDialogBody>
      <YaInput label="Name" orientation="horizontal" placeholder="Enter your name" className="flex-1" />
      <YaInput label="Username" orientation="horizontal" placeholder="Enter your username" className="flex-1" />
    </YaDialogBody>
    <YaDialogFooter>
      <YaDialogClose asChild>
        <YaButton variant="tertiary">Cancel</YaButton>
      </YaDialogClose>
      <YaDialogClose asChild>
        <YaButton variant="secondary">Save</YaButton>
      </YaDialogClose>
    </YaDialogFooter>
  </YaDialogContent>
</YaDialog>

Without Close Button

Hide the X button for controlled closing behavior:

<YaDialogContent showCloseButton={false}>
  <YaDialogHeader>
    <YaDialogTitle>Custom Close Behavior</YaDialogTitle>
    <YaDialogDescription>
      This dialog has no X button. Use the footer buttons to close.
    </YaDialogDescription>
  </YaDialogHeader>
  <YaDialogBody>
    <p>Useful when you want to control how users dismiss the dialog.</p>
  </YaDialogBody>
  <YaDialogFooter>
    <YaDialogClose asChild>
      <YaButton variant="tertiary">Cancel</YaButton>
    </YaDialogClose>
    <YaDialogClose asChild>
      <YaButton variant="primary">Confirm</YaButton>
    </YaDialogClose>
  </YaDialogFooter>
</YaDialogContent>

Controlled State

Control the dialog programmatically:

Dialog is closed

'use client'

import { useState } from 'react'

export default function ControlledDialog() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <YaButton onClick={() => setOpen(true)}>Open Dialog</YaButton>
      
      <YaDialog open={open} onOpenChange={setOpen}>
        <YaDialogContent>
          <YaDialogHeader>
            <YaDialogTitle>Controlled Dialog</YaDialogTitle>
            <YaDialogDescription>
              This dialog is controlled via external state.
            </YaDialogDescription>
          </YaDialogHeader>
          <YaDialogBody>
            <p>You can programmatically open or close this dialog.</p>
          </YaDialogBody>
          <YaDialogFooter>
            <YaButton variant="secondary" onClick={() => setOpen(false)}>
              Close
            </YaButton>
          </YaDialogFooter>
        </YaDialogContent>
      </YaDialog>
    </>
  )
}

Confirmation Dialog

A destructive confirmation pattern:

<YaDialog>
  <YaDialogTrigger asChild>
    <YaButton variant="primary" destructive>Delete Item</YaButton>
  </YaDialogTrigger>
  <YaDialogContent size="sm">
    <YaDialogHeader>
      <YaDialogTitle>Are you sure?</YaDialogTitle>
      <YaDialogDescription>
        This action cannot be undone. This will permanently delete the item
        and remove its data from our servers.
      </YaDialogDescription>
    </YaDialogHeader>
    <YaDialogFooter>
      <YaDialogClose asChild>
        <YaButton variant="tertiary">Cancel</YaButton>
      </YaDialogClose>
      <YaDialogClose asChild>
        <YaButton variant="primary" destructive>Delete</YaButton>
      </YaDialogClose>
    </YaDialogFooter>
  </YaDialogContent>
</YaDialog>

Custom Content

Add any custom content to the dialog body:

<YaDialogBody>
  <div className="border border-dashed border-primary rounded-lg p-6 flex items-center justify-center">
    <span className="text-sm text-muted-foreground italic">
      Place your content here
    </span>
  </div>
</YaDialogBody>

For simple notifications or success dialogs:

<YaDialogFooter>
  <YaDialogClose asChild>
    <YaButton variant="secondary">Done</YaButton>
  </YaDialogClose>
</YaDialogFooter>

A dialog for collecting email subscriptions:

<YaDialog>
  <YaDialogTrigger asChild>
    <YaButton variant="primary">Subscribe</YaButton>
  </YaDialogTrigger>
  <YaDialogContent>
    <YaDialogHeader>
      <YaDialogTitle>Subscribe to our newsletter</YaDialogTitle>
      <YaDialogDescription>
        Enter your email to receive updates, tips, and exclusive content directly in your inbox.
      </YaDialogDescription>
    </YaDialogHeader>
    <YaDialogBody>
      <div className="flex gap-2">
        <YaInput 
          type="email"
          name="email"
          placeholder="you@example.com"
          aria-label="Email address"
          className="flex-1"
        />
        <YaButton variant="primary">Subscribe</YaButton>
      </div>
    </YaDialogBody>
    <YaDialogFooter>
      <YaDialogClose asChild>
        <YaButton variant="tertiary">Close</YaButton>
      </YaDialogClose>
    </YaDialogFooter>
  </YaDialogContent>
</YaDialog>

Props

YaDialog

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`modal`	`boolean`	`true`	Whether to render as modal

YaDialogContent

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'full'`	`'default'`	Dialog width
`showCloseButton`	`boolean`	`true`	Show the X close button
`className`	`string`	-	Additional classes

YaDialogHeader

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaDialogTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaDialogDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaDialogBody

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaDialogFooter

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaDialogClose

Wraps any element to make it a close trigger. Use asChild to compose with your own button.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto child

Accessibility

Best Practices

Do	Don't
Use dialogs for focused tasks	Use for simple notifications (use toast)
Keep dialog content concise	Nest dialogs within dialogs
Provide clear action buttons	Leave users without a way to close
Use appropriate sizes	Force users to scroll excessively
Use `size="sm"` for confirmations	Use full-width for simple forms

TypeScript

import { type VariantProps } from 'class-variance-authority'
import { yaDialogContentVariants } from '@/components/ui/ya-dialog'

type DialogSize = VariantProps<typeof yaDialogContentVariants>['size']

Colors

Color system & tokens

Installation

Setup instructions

YA Dialog

Quick Start

Basic Usage

Sizes

With Form

Without Close Button

Controlled State

Confirmation Dialog

Custom Content

Single Button Footer

Props

YaDialog

YaDialogContent

YaDialogHeader

YaDialogTitle

YaDialogDescription

YaDialogBody

YaDialogFooter

YaDialogClose

Accessibility

Best Practices

TypeScript

Colors

Installation

On this page

YA Dialog

Keyboard Navigation

Focus Management

ARIA Attributes

Screen Reader Support

Colors

Installation

On this page