Disclosure
Carbon's Disclosure, a single collapsible section with a chevron trigger. Sits below Accordion in scope: Accordion is a multi-section pattern with managed open-state across siblings; Disclosure is one standalone section that toggles independently.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Disclosure, DisclosureContent, DisclosureSummary } from "@avala/design"; <Disclosure size="md"> <DisclosureContent /> <DisclosureSummary /> </Disclosure>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-disclosure--defaultOpen in Storybook →
When to use
- A standalone "show more" / "show details" surface, separate from any sibling sections.
- Optional advanced settings that should be hidden by default to keep the surface dense.
- Marketing FAQ items that don't share open-state with each other.
- Inline progressive disclosure inside a form group.
When not to use
- Multiple linked collapsible sections sharing a managed open-state → use `Accordion`. Disclosure doesn't coordinate siblings.
- A panel that should always be visible → don't wrap it.
- A modal-style reveal with a dim overlay → use `Sheet` or `Dialog`.