Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation link Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Disclosure

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleVariantsSizesColor schemeConfigurationSpaceInteraction statesStyleVariantsSizesColor schemeConfigurationSpaceInteraction states

Style

A disclosure is a container that includes a caret icon and a text label, similar to an Accordion panel. When expanded, some styles are added for emphasis.

Anatomy

Anatomy of a disclosure component with numbered annotations.
  1. Caret icon
  2. Title text
  3. Container
  4. Thick border
  5. Box shadow

Variants

Box

The box variant, which is the default style, shows a border around the entire disclosure in all states. A thicker accent border appears on the left when it’s expanded.

Two box variant disclosures. One closed, one open on a light color scheme.

Borderless

The borderless disclosure omits the border and uses --rh-color-interactive-primary-default for the title text for improved interactive affordance.

Two borderless variant disclosures. One closed, one open on a light color scheme.

Sizes

The style variants come in both sizes.

Default

Two default-sized disclosures. The first is the box variant and the second is the borderless variant on a light color scheme.

Compact

The compact size reduces the font size of the title text and amount of padding around it.

Two compact disclosures. The first is the box variant and the second is the borderless variant on a light color scheme.

Color scheme

Light scheme

Two disclosures. One closed, one open on a light color scheme.

Dark scheme

Two disclosures. One closed, one open on a dark color scheme.

Configuration

A disclosure includes two parts, a trigger that the user selects and the container that opens and discloses the content.

Two disclosures, one open and one closed showing the alignment of the chevron with the trigger text. Below the disclosures is an accordion with the text, 'Accordion panels have the caret icon on the right to differentiate.'

Nested disclosure

Only one additional disclosure can be nested to help organize content better. If you need to use more disclosures, use an Accordion instead.

Two open disclosures, each with a nested disclosure. The top nested disclosure is closed while the bottom is open.

Space

A disclosure’s spacing is affected by whether they are the default or compact size. A box and a borderless disclosure used at the same size have the same spacing.

A closed default-sized and a closed compact disclosure, each showing the spacing tokens within the disclosure element. The default-sized has 24px spacing on the left and right side and 16px on the top and bottom. The compact version has 16px and 8px respectively.

Spacing when disclosures are collapsed

An open default-sized and an open compact disclosure, each showing the spacing tokens inside the disclosure panel. The default-sized has 24px spacing on the left, right and bottom with 16px between the summary and the panel. The compact version has 16px on the left, right and top, but keeps the 24px on the bottom.

Spacing when disclosures are expanded

An open default-sized and an open compact disclosure, each showing the spacing tokens around the nested disclosure inside the panel. The default-sized has 24px on the left, right and bottom. The compact has 16px on the left and right with 24px on the bottom.

Spacing when disclosures are nested

Interaction states

Hover

The entire trigger button surface changes color on hover.

Two open disclosures, one open, one closed. Each showing the gray hover state of the disclosure's trigger. Two open disclosures on a dark color scheme, one open, one closed. Each showing the gray hover state of the disclosure's trigger.

Focus and Active

A focus ring wraps around the entire trigger button in both focus and active states.

Two open disclosures, one open, one closed. Each showing the gray focus state of the disclosure's trigger plus the blue focus outline. Two open disclosures on a dark color scheme, one open, one closed. Each showing the gray focus state of the disclosure's trigger plus the blue focus outline.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify