ProgressiveDisclosure
stablev1.0.0Three-level disclosure primitive (compact / default / verbose) that resolves the H7 tension between Principle 02 (Ceremony Over Efficiency) and expert user needs. Includes DisclosureLevelToggle for shared list-level control.
import { ProgressiveDisclosure } from "@nodus/design-system"Demo coming soon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
summaryreq | ReactNode | — | Content shown at all disclosure levels. |
detail | ReactNode | — | Content shown at default and verbose levels. |
verbose | ReactNode | — | Content shown only at verbose level. |
defaultLevel | "compact" | "default" | "verbose" | "default" | Starting disclosure level. |
expandLabel | string | "Show more" | Expand CTA label. |
collapseLabel | string | "Show less" | Collapse CTA label. |
verboseLabel | string | "Show full detail" | Label when expanding from default to verbose. |
variant | "inline" | "block" | "block" | Layout variant. |
summaryrequiredType
ReactNodeDefault —Content shown at all disclosure levels.
detailType
ReactNodeDefault —Content shown at default and verbose levels.
verboseType
ReactNodeDefault —Content shown only at verbose level.
defaultLevelType
"compact" | "default" | "verbose"Default "default"Starting disclosure level.
expandLabelType
stringDefault "Show more"Expand CTA label.
collapseLabelType
stringDefault "Show less"Collapse CTA label.
verboseLabelType
stringDefault "Show full detail"Label when expanding from default to verbose.
variantType
"inline" | "block"Default "block"Layout variant.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?