BRAID
Braid Logo
 

Disclosure

Content
Open in Playroom

Alternatives

  • Accordion — For a more prominent visual treatment.
  • Tabs — For a horizontal selection of multiple content panels.
  • Dialog — For exposing a smaller amount of content in a modal.
  • Drawer — For exposing a larger amount of content in a modal.

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

Sizing

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

Custom space

The default space between the disclosure label and content will be determined by the size. Alternatively, this can be customised 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.
Preceeding 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

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.
Open in Playroom