Disclosure usage guidelines

A disclosure is a collapsible section of content. It allows users to progressively view related content.

When to use

• When users need to quickly scan section headers and expand only the content they need.
• When users need to selectively expand and collapse specific sections of content to focus on what’s relevant to them.
• To organize related information into distinct, manageable chunks, improving readability and saving space.

When not to use

• For short pieces of content that don’t benefit from being hidden.
• When all content needs to be visible, or when it is critical that the user sees a particular section of content.
• If the content sections are not logically related or don’t form a cohesive group.
• When users need to compare content side-by-side. For this consider tabs or columns instead.
• When content requires multiple levels of nesting. For this use nested tabs or a multi-page navigation structure.

Properties

Variant

Preview

Base variant

Subtle variant

Code

import { Disclosure, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Disclosure variant="base" title="Base variant">
        This is a base disclosure.
      </Disclosure>
      <Disclosure variant="subtle" title="Subtle variant">
        This is a subtle disclosure.
      </Disclosure>
    </Stack>
  );
}

Value	Use cases
Base	The base disclosure should be used for most use cases. The heading styling helps users differentiate between the disclosure sections, especially when the disclosure content is long or complex.
Subtle	The subtle disclosure has less visual importance and can be used for disclosures that take a less prominent role on the page. Subtle disclosures should not be used if the disclosure content is long or complex, since it may be difficult for the user to identify where the disclosure begins and ends.

Size

Preview

Medium size

Small size

Code

import { Disclosure, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Disclosure size="medium" title="Medium size">
        This is a medium disclosure.
      </Disclosure>
      <Disclosure size="small" title="Small size">
        This is a small disclosure.
      </Disclosure>
    </Stack>
  );
}

Value	Use cases
Medium	The default size that should be used for most disclosures.
Small	Small disclosures are meant to be used in filters, side panels, and other small content areas. They should contain simple content with only one or two components or text elements inside each disclosure. Small disclosures have limited heading content because of their size.

Formatting and layout

Spacing

Disclosures should always be vertically stacked together in a DisclosureGroup component. They are always full-width and should fill the width of the container that they are placed in.

Base disclosures
Base disclosures are stacked 16px apart to maintain visual separation between the headers. This spacing is set on the disclosure group.

Subtle disclosures
Subtle disclosures are stacked 0px apart with a divider between them. This spacing is set on the disclosure group.

Preview

Base variant

Disclosure 1

Disclosure 2

Subtle variant

Disclosure 1

Disclosure 2

Code

import { Disclosure, DisclosureGroup, Stack, Text } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={32}>
      <Text as="h2" variant="title-4">
        Base variant
      </Text>

      <DisclosureGroup>
        <Disclosure id="disclosure-1" title="Disclosure 1">
          This is the first disclosure in the group.
        </Disclosure>
        <Disclosure id="disclosure-2" title="Disclosure 2">
          This is the second disclosure in the group.
        </Disclosure>
      </DisclosureGroup>

      <Text as="h2" variant="title-4">
        Subtle variant
      </Text>

      <DisclosureGroup variant="subtle">
        <Disclosure id="disclosure-1" title="Disclosure 1">
          This is the first disclosure in the group.
        </Disclosure>
        <Disclosure id="disclosure-2" title="Disclosure 2">
          This is the second disclosure in the group.
        </Disclosure>
      </DisclosureGroup>
    </Stack>
  );
}

Header content

Disclosure headers can include a simple action button. The size of the button should be analogous to the size of the disclosure. More complex actions can be placed within the disclosure body content.

Additionally, headers of medium-sized disclosures can include the following:

• An icon before or after the title text
  This icon should be clear and should add supplemental information to the title rather than just being additional visual noise. Often these icons are used to show status.
• A badge
  This badge should add information that is useful to a user.

No other components may be added to the disclosure header.

Body content

Disclosure body content can contain any other components. Design best practices should continue to be followed within disclosures.

Small disclosures should only be used for single pieces of content, and should not contain more than one or two components or text elements in the body.

Content writing

• Use clear, concise, and distinct titles that make it obvious what content is within each disclosure.
• If using a header badge, keep its label short and to the point.
• If using a header action, keep the button label short, simple, and obvious.
• If a disclosure gets unreasonably long or space becomes an issue, consider using a different solution.

Behaviors

Nested disclosures

Disclosures should never be nested within each other. If nesting is necessary, consider other design solutions like using nested tabs or multiple pages for navigation.