Skip to main contentCarbon Design System

Disclosures

Disclosures are moments that open up on a page and reveal additional information related to the source it is triggered from.

Overview

Disclosures support a wide range of different use cases in product interfaces and are commonly used to reveal more information or details about an element or content on a page. Unlike tooltips, the content expanded by a disclosure may contain interactive elements.

At its core, a disclosure is comprised of two parts—a trigger that the user interacts with by clicking or using their keyboard and the container that opens and discloses the content.

When to use

  • Use when disclosing additional content about part of a UI.
  • Use when there is a need to include interactive elements in a popover.
  • Use to show settings, filtering, or sorting menus that affect sections of a page, for example in data tables, or an entire page.
  • Use when displaying content within types of dropdowns, for example profile menus, combo buttons, and menu buttons.

When not to use

  • Don’t use to present critical information or request required input needed to complete a workflow. Use the modal component instead.
  • Don’t use when the user hasn’t explicitly triggered the popover to open on click.
  • Don’t use if the popover needs to have a width larger than six columns.

Best practices

Keep disclosures at a reasonable size

A disclosure should not take up a considerable amount of the size of the screen. Disclosures are meant to be smaller moments that can open on top of different areas of a page. They should not seem like a disruption to the users workflow and should not act as a screen takeover. Keep all content in a disclosure concise and only include information that is necessary. We recommend having a width of six columns or less.

Disclosures should be user initiated

Disclosures should always be triggered to open or close by the user. Disclosures should never open automatically because this could be potentially intrusive to the user’s workflow.

One disclosure should open at a time

If there are multiple instances on a page where a disclosure is present, only one should open at a time to avoid screen clutter and to help the user stay focused on the information being disclosed.

Do have one disclosure open at a time.

Do have one disclosure open at a time.

Do not have multiple disclosures open at the same time.

Do not have multiple disclosures open at the same time.

Avoid nesting disclosures

Do not nest one disclosure within another disclosure. Nesting disclosures creates a stacking effect and could confuse the user of where they should be focusing their attention and which disclosure they should be interacting with. Using submenus in a context menu that fly out to the sides is an acceptable way to disclose additional information in a disclosure.

Do not hide critical information within a disclosure

Do not hide important information inside of a disclosure that the user may need in order to complete a task or workflow. Keep critical information at a higher level so the user has better visibility.

Behaviors

Opening and closing a disclosure

To open a disclosure to reveal its content, click the trigger button it is related to. If using a keyboard, press Enter or Space.

To close a disclosure, either click on the trigger button again, click anywhere outside of the open disclosure container or click on the close x icon if it is present within the disclosure. If using a keyboard, press Esc or Tab to tab out of the disclosure.

Dismissible action

Depending on the type of content in a disclosure, it can be useful to display a close x icon. Be mindful when and where you place a close icon in a disclosure. The close icon should always be in the top right corner of the popover and should not interfere or overlap with inline interactive elements.

Do place a close icon in the upper right hand corner in an empty space.

Do place a close icon in the upper right hand corner in an empty space.

Do not place a close icon inline with interactive elements.

Do not place a close icon inline with interactive elements.

Visual guidance

Trigger button container

A disclosure is controlled by a trigger button. The trigger button can visually change its shape and size depending on the usecase.

The trigger button can use any of our button types and can be set at these three sizes—48px (lg), 40px (md) or 32px (sm).

Example of trigger button container height sizes.

Example of trigger button container height sizes.

Trigger button icon

If a trigger button contains an icon, the icon size should be either 20px or 16px.

Example of trigger button icon sizes.

Example of trigger button icon sizes.

Popover

A popover component is used as the underlying layer of a disclosure to disclose its content. See the popover component guidance for more information.

Example of a popover container.

Example of a popover container.

Content

The type of content in a disclosure can vary depending on the use case. A disclosure can be simple and contain solely informational text. In some cases content can be more complex and include a combination of multiple sections and interactive elements. Below are some common examples and best practices of how to show body text, heading text, and footer content in disclosures.

Heading text

Heading text can be placed above body text in a disclosure. Placing the heading text with 0px padding above the body text or adding a divider between the heading text and body text are two different common use cases.

Example of a disclosure with heading text.

Example of a disclosure with heading text.

Footer content

Footer content can be placed below the body text it is related to. Placing the footer content with 16px padding below the body text or adding a divider between the footer content and body text are two different common use cases.

Example of a disclosure with footer content.

Example of a disclosure with footer content.

Multiple sections of text

Depending on the use case, you may need a disclosure to show multiple sections of content. Use padding or dividers to visually create sections. Profile menus and context menus typically display multiple sections of content depending on the complexity of the menu.