Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Dialog

Overview Style Guidelines Code Demos Accessibility
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states

Style

A dialog is a floating container on top of a transparent backdrop. The container requires a backdrop so it can separate itself from the page underneath, this helps users focus on the dialog content.

Anatomy

Anatomy of a dialog with lots of annotations pointing to various parts
  1. Backdrop
  2. Container
  3. Close button
  4. Header section
  5. Body text section
  6. Footer section
  7. Container shadow

Theme

A dialog is available in the light theme only.

Light theme dialog

Configuration

The dialog container does not have a maximum height, but too much content in the body text section will cause scrolling.

How a dialog container is constructed showing border radius, region, and scrolling details

Space

The amount of space in a dialog reduces as breakpoints get smaller.

Large breakpoints

A dialog container on a large breakpoint with spacing between all elements

Small breakpoints

A dialog container on a small breakpoint with spacing between all elements
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer
32 --rh-space-2xl 32px spacer

Interaction states

Interactive elements may be added to a dialog container, but very sparingly. If interactive elements are added, go to their element or pattern pages to view the interaction states.

Hover

Control and inactive page number buttons have the same hover state. Truncation is not interactive so it has no hover state.

Light theme dialog hover state example
Property Light theme
Color - close button #151515

Focus

Light theme dialog focus state example
Property Light theme
Color - close button #151515
Color - focus ring #0066cc

Active

Light theme dialog active state example
Property Light theme
Color - close button #151515
Color - focus ring #0066cc
© 2021-2024 Red Hat, Inc. Deploys by Netlify