Expandable
Expandable hides supplementary details, long API responses, and troubleshooting steps behind one clickable disclosure, a lighter alternative to Accordion
Use Expandable to hide long API responses, troubleshooting steps, or extra details that would break the reading flow. It renders as one clickable disclosure. It is lighter than Accordion. Accordion is for grouped, navigable sections.
Use Expandable when:
- Supplementary details would interrupt the main narrative
- Optional information benefits some readers but not all
- Long content (like full API responses) should be collapsed by default
Basic Usage
<Expandable title="Show more details">
These details are hidden by default and revealed when clicked.
</Expandable>Default Open
Start expanded:
This section starts visible.
<Expandable title="Expanded by default" defaultOpen>
This section starts visible.
</Expandable>Common Use Cases
API Response Details
Collapse long responses:
Troubleshooting Steps
Props
Section header text.
Start expanded.
Expandable vs Accordion
| Feature | Expandable | Accordion |
|---|---|---|
| Purpose | Hide supplementary content | Organize sections of equal importance |
| Icons | No | Yes |
| Descriptions | No | Yes (subtitle support) |
| Grouping | Standalone | Can be grouped with AccordionGroup |
| Best for | Optional details, long examples | FAQs, feature lists, navigation |
Rule of thumb: If the content is "nice to have," use Expandable. If readers choose between sections, use Accordion.