Expandable
Expandable creates a simple show/hide toggle for content that readers may want to see but isn't essential to the main flow.
Use Expandable to tuck away verbose API responses, troubleshooting steps, or supplementary details that would otherwise break the reading flow. It renders as a single clickable disclosure -- lighter than Accordion, which is built 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 verbose responses that would otherwise interrupt the documentation flow:
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 users need to choose between sections, use Accordion.