Dialog.Docs

import { Meta } from "@storybook/blocks"; import { Title, CustomArgsTable } from "@calcom/storybook/components"; import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog"; import * as DialogStories from "./Dialog.stories";

<Meta of={DialogStories} /> <Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" />

Definition

The Dialog component provides a flexible way to create dialogs in your application.

Structure

The Dialog component is composed of the following components:

• Dialog: The main component that wraps the entire dialog. It manages the dialog's open and close states.

• DialogContent: Represents the content of the dialog. It can have different sizes, types, and an optional icon.

• DialogHeader: Renders the header of the dialog, including the title and subtitle.

• DialogFooter: Renders the footer of the dialog, which can contain action buttons.

• DialogClose: Renders a close button for the dialog.

Components Arguments

Dialog

<CustomArgsTable of={Dialog} />

DialogContent

<CustomArgsTable of={DialogContent} />

DialogHeader

<CustomArgsTable of={DialogHeader} />

DialogFooter

<CustomArgsTable of={DialogFooter} />

DialogClose

<CustomArgsTable of={DialogClose} />

{/* ## Dialog Story

<Canvas of={DialogStories.Default}/> */}