Dialog

Overview Style Guidelines Code Demos Accessibility
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  1. Overview
  2. Status
  3. Sample element
  4. When to use

Overview

A dialog displays important information to users without requiring them to navigate away from the page.

A dialog container with a black headline, black body text, two blue buttons, and a dark gray close button all on a white background on top of a slightly transparent black background

Status

What do these mean?
Figma library:
Ready
RH Elements:
Ready
RH Shared Libs:
Ready

Sample element

Leave page

If you leave the page, any unsaved information will be lost.

Leave Cancel

Open dialog

When to use

  • When you need to confirm user decisions
  • When you need an immediate response from users
  • When you need to notify users of urgent information concerning their current workflow

Status checklist

Property Status Meaning
Figma library Ready Component is available in the Figma library
RH Elements Ready Component is available in the RH Elements repo
RH Shared Libs Ready Component is available in the RH Shared Libs repo
Edit this page on GitHub