Dialog responsive

A dialog is a container that floats on top of another surface. Dialogs focus a user's attention on a single-step task, question, or message.

The DialogResponsive component is a Base UI component.

<DialogResponsive>
  <DialogResponsiveTrigger render={<Button label="Open dialog" />} />
  <DialogResponsivePopup>
    <img
      alt="Cat"
      className="aspect-16-9 rounded-[12px] object-cover select-none max-[640px]:rounded-[20px]"
      draggable={false}
      src="https://placecats.com/640/480"
    />
    <Spacer height={16} />

    <p className="font-700 text-24 text-center text-gray-12">Welcome!</p>
    <Spacer height={4} />
    <p className="text-center">Anyone to create their own components.</p>
    <Spacer height={24} />

    <Button fullWidth label="Continue" size={48} />
  </DialogResponsivePopup>
</DialogResponsive>

State

By default, DialogResponsive is an uncontrolled component that manages its own state.

<DialogResponsive>
  <DialogResponsiveTrigger render={<Button label="Open dialog" />} />
  <DialogResponsivePopup>Hello!</DialogResponsivePopup>
</DialogResponsive>

Use open and onOpenChange props if you need to access or control the state.

const [isOpen, setIsOpen] = useState(false)

return (
  <DialogResponsive onOpenChange={setIsOpen} open={isOpen}>
    <DialogResponsiveTrigger render={<Button label="Open dialog" />} />
    <DialogResponsivePopup>Hello!</DialogResponsivePopup>
  </DialogResponsive>
)