On this page
Overview
Show code, AdvancedOptions.tsx
Variants
Show all
The button stays after the list and says what a press does.
- It reads "Show all 12", then "Show fewer".
- It tells assistive technology whether the whole list shows.
Show code, ShowMore.tsx
Details in a sheet
The list stays in place under the Sheet, so people continue from the row they opened.
Show code, DetailsInSheet.tsx
Overflow actions
Share and Edit stay visible; the rest wait in a Menu named More actions.
Show code, OverflowActions.tsx
Explain a term
A help button opens a Popover with a short definition and a link.
Show code, ExplainATerm.tsx
Anatomy
Visible layer
Summary
Disclosed layer
More actions
Show code, DisclosureLayers.tsx
Rules
Show what most people need, and keep the rest a step away: advanced options wait behind a Disclosure.
Use it when
- Options, details or actions most people rarely need
- An explanation of a term that would clutter the page
Which to use
Keep the rest at the depth that fits it: in the page, over it, or on a page of its own.
- Disclosure
Optional settings or guidance below a summary.
Depth: Inline
- Accordion
Sections of one topic, such as questions and answers.
Depth: Inline
- Show all
The rest of a long list.
Depth: Inline
- Popover
An explanation or a small form, opened on a press.
Depth: Overlay
- Menu
Actions used less often.
Depth: Overlay
- Sheet
The details of an item, beside the list it came from.
Depth: Overlay
- Dialog
A focused task that blocks the page until it ends.
Depth: Overlay
- A page of its own
Everything about one thing, through a link.
Depth: Page
One step away
Keep the rest one step away at most: no disclosure in a disclosure, and no menu in a popover in a sheet.
Content
Label a disclosure with what it holds, "Advanced options", and say how much more there is.
- Say "Show all 12", not "Show more".
- Name an overflow menu "More actions", or "More actions for Launch brief" in a row.
Accessibility
Focus and keyboard
A Disclosure's summary is a button; Enter or Space opens it, and focus stays.
- Show all keeps focus as the list grows.
- A Sheet, Menu or Popover moves focus in as it opens and back to its trigger as it closes.