The collapsible component enables progressive experiences and efficiency within the UI by standardizing how visual groupings can collapse and expand to reveal more or less information.
- Content area
- Quick action button (optional)
While the collapsible component is not consistently made up of specific atoms or molecules, it always contains a content area with two distinct regions: the primary region and the secondary region. The primary region contains all content that is visible before the user interacts with the component. The secondary region contains all content that becomes visible after the user interacts with the component. Both regions are independent, meaning each region may contain unique content inside.
Quick action button
In addition to the content regions, an optional caret quick action button may be included if the affordance is absolutely necessary. Because users are familiar with interacting with a variety of interface patterns, avoid using the caret whenever possible. The quick action button should rarely, if ever, be used on mobile. While the medium emphasis quick action button is shown here, any size or emphasis of the quick action button may be used.
There are no spacing guidelines for the container or content areas within this component. The optional quick action button is recommended to be spaced at least ∆platformSpacingTiny from the content area, wherever it is anchored.
There are no theming considerations for this component.
There are no placement considerations for this component.
Note: The quick action button can either be set to appear on hover, or be persistent.
Developer DocsVue Developer Docs
Component documentation coming soon!