BRAID
Braid Logo
 

Disclosure

A single section of inline content that can be expanded and collapsed by the user.
Content
Open in Playroom

Accessibility

Follows the WAI-ARIA Disclosure Pattern.

Visual weight

By default, the call to action will have the same affordance as TextLinkButton. Optionally, the visual weight can be decreased by setting weight to weak.
Content
Open in Playroom

Size

The size can be customised via the size prop, which accepts the same sizes as the Text component.
Large size
Defaults to large text size
Standard size
Defaults to standard text size
Small size
Defaults to small text size
Xsmall size
Defaults to xsmall text size
Open in Playroom

Spacing

The default space between the disclosure label and content will be determined by the size. Alternatively, this can be tailored via the space prop.
Hide content
Content
Open in Playroom

Inlining with content

A Disclosure may also be nested within a sentence, i.e. inside a Text or Heading component. In this case, the text size and tone will all be inherited from the parent typographic component.
Preceding text content that is followed by a Disclosure. Content
Open in Playroom

Managing state

Disclosures manage their own state internally by default. If you’d like to take control of the state yourself, you can pass expanded and onToggle props.
Hide content
Content
Open in Playroom

When to use

Use a Disclosure:
  • to display a single section of collapsable content
  • to reveal optional content, such as explanatory text or further details.
Don’t use a Disclosure:
  • if the information is needed for the user to complete their current task (make it visible upfront instead)
  • to display multiple sections of collapsable content (consider using an Accordion instead)
  • to display complex content including images or CTAs (consider using a Dialog instead)
  • to provide a short definition of what something means (consider using a TooltipRenderer instead).

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Disclosure
  data={{ testid: 'disclosure-1' }}
  // => data-testid="disclosure-1"
>
  ...
</Disclosure>
Open in Playroom

Content guidelines

  • A Disclosure supports rich content but may be best suited for simple text and links.
  • Be mindful that a Disclosure will push down the content below it. Ideally keep it’s content to a few sentences or a single paragraph.

Alternatives

  • Accordion — For revealing sections of content in a vertically stacked list.
  • Tabs — For a horizontal selection of multiple content panels.
  • Dialog — For exposing additional content in a modal with rich formatting.
  • Drawer — For exposing complex content or capturing user input in a modal panel.