Dialogs
uiCategories.overlaysModals.components.showcases.dialogs.description
Installation
Import
Usage
uiCategories.overlaysModals.components.showcases.dialogs.usage
Design Guidelines
uiCategories.overlaysModals.components.showcases.dialogs.designGuidelines
uiCategories.overlaysModals.components.showcases.dialogs.examples.basicUsage.title
uiCategories.overlaysModals.components.showcases.dialogs.examples.basicUsage.description
uiCategories.overlaysModals.components.showcases.dialogs.examples.editUserForm.title
uiCategories.overlaysModals.components.showcases.dialogs.examples.editUserForm.description
uiCategories.overlaysModals.components.showcases.dialogs.examples.deleteConfirmation.title
uiCategories.overlaysModals.components.showcases.dialogs.examples.deleteConfirmation.description
uiCategories.overlaysModals.components.showcases.dialogs.examples.controlledDialog.title
uiCategories.overlaysModals.components.showcases.dialogs.examples.controlledDialog.description
uiCategories.overlaysModals.components.showcases.dialogs.examples.fullWidthContent.title
uiCategories.overlaysModals.components.showcases.dialogs.examples.fullWidthContent.description
Dialog
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialog.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
open | boolean | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialog.props.open.description |
defaultOpen | boolean | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialog.props.defaultOpen.description |
onOpenChange | (open: boolean) => void | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialog.props.onOpenChange.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogTrigger
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogTrigger.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
className | string | — | packages.commonProps.className.description |
DialogContent
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogContent.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogContent.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogHeader
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogHeader.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogTitle
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogTitle.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogTitle.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogDescription
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogDescription.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogDescription.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogFooter
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogFooter.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DialogClose
uiCategories.overlaysModals.components.showcases.dialogs.composedComponents.dialogClose.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
uiCategories.overlaysModals.components.showcases.dialogs.accessibility