Back to Docs
UX Recipe

Progressive Disclosure

Reveal complexity on demand. Keep interfaces calm until the user signals readiness for more.

The Pattern

Show only the essential controls and information first. Tuck advanced options, metadata, or secondary actions behind a single click or hover. This reduces cognitive load and keeps primary flows fast.

When to Use

  • Settings panels with expert-mode toggles
  • Dashboard cards that expand inline for details
  • Onboarding flows that unlock steps sequentially
  • CLI tools with --verbose flags

Implementation

1. Identify the 80% use case — what does everyone need immediately?

2. Place the remaining 20% behind a disclosure trigger (chevron, "Advanced" link, hover card).

3. Animate the reveal with a height transition or fade — never jarring.

4. Persist the expanded state if the user returns to this view.

Anti-patterns

Do not bury critical actions behind disclosure. If a setting changes core behavior, surface it. Avoid nesting disclosures inside disclosures — one level deep is the sweet spot.