Disclosure
Disclosures, collapsible regions, and tabbed interfaces.
Example
A representative composition rendered with the published package API.
Options
The decisions most consumers need to make when adopting this family.
patternUnderline keeps the rail quiet; divider adds structural separation; pills suit small peer views; segmented is for mode switching. NavigationTabs also supports underline, divider, and pills; use NavigationTabsList variant="pills" for pill-styled routed pages.
nestingPage-level tabs use NavigationTabs or the default Tabs. A tab group inside a section or another tab panel uses variant="nested" so the hierarchy is visible. Avoid nesting where a single tab level or separate sections will do. When nested tabs are unavoidable, the active one takes the Conscia green indicator so it never competes with page tabs.
Disclosure countShow a count when the summary hides a list, such as the rows of a daily data table.
| Option | Values or anatomy | Guidance |
|---|---|---|
pattern | underline (default) · divider · pills · segmented · nested | Underline keeps the rail quiet; divider adds structural separation; pills suit small peer views; segmented is for mode switching. NavigationTabs also supports underline, divider, and pills; use NavigationTabsList variant="pills" for pill-styled routed pages. |
nesting | page tabs · nested | Page-level tabs use NavigationTabs or the default Tabs. A tab group inside a section or another tab panel uses variant="nested" so the hierarchy is visible. Avoid nesting where a single tab level or separate sections will do. When nested tabs are unavoidable, the active one takes the Conscia green indicator so it never competes with page tabs. |
Disclosure count | omitted · number | Show a count when the summary hides a list, such as the rows of a daily data table. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { Collapsible, CollapsibleContent, CollapsibleTrigger, Disclosure, NavigationTab } from "@conscia-labs/design-system";