Dialog

Dialog is a window containing contextual information, tasks, or workflows that appear over the user interface.

import { Dialog } from '@backyard-ui/core';

Use the size prop to increase the visual size.

Use the isCentered prop to center the Dialog vertically.

Use the hasScroll prop if the content overflows beyond the viewport.

By default, the Dialog closes when you click its overlay. You can set closeOnOverlayClick to false if you want the Dialog to stay visible.

By default, the Dialogs are uncontrolled but you can make it controlled

• size
  Description The `max-width` css property

  Type

  "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

  Default

  xl
• isOpen
  Description If `true` the Dialog will be initially opened

  Type

  boolean

  Default

  false
• closeOnOverlayClick
  Description If `false` the Dialog will be close when clicked on overlay

  Type

  boolean

  Default

  true
• hasScroll
  Description If `true` the content will be scrollable

  Type

  boolean

  Default

  false
• isCentered
  Description If `true` the Dialog will be centered on screen

  Type

  boolean

  Default

  false

• asChild
  Description

  Type

  boolean

• asChild
  Description

  Type

  boolean

• asChild
  Description

  Type

  boolean