Dialog responsive

Last updated on March 25, 2026 at 5:50 PM

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.

#Usage

The DialogResponsive component is a Base UI component.

<DialogResponsive>
  <DialogResponsiveTrigger render={<Button>Open dialog</Button>} />
  <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-gray-12 text-center">Welcome!</p>
    <Spacer height={16} />
    <p className="text-center">Anyone to create their own components.</p>
    <Spacer height={24} />
    
    <Button isFullWidth size={48}>
      Continue
    </Button>
  </DialogResponsivePopup>
</DialogResponsive>

#State

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

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

Use isOpen and onIsOpenChange props if you need to access or control the state.

const [isOpen, setIsOpen] = useState(false);

return (
  <DialogResponsive>
    <DialogResponsiveTrigger render={<Button>Open dialog</Button>} />
    <DialogResponsivePopup>
      Hello!
    </DialogResponsivePopup>
  </DialogResponsive>
);