Design Language
Design System
ActionButton
Avatar
Badge
Breadcrumb
Calendar
Card
Chart
Checkbox
ColorPicker
ContextMenu
ContextualHelp
DataTable
DatePicker
DateRangePicker
Dialog
Disclosure
FieldSet
FormMessage
FormattedText
IconButton
IllustratedMessage
Info
InputButton
InputContainer
Loading
Menu
NumberInput
Popover
ProgressBar
RadioGroup
SegmentedInput
Select
Skeleton
Slider
Switch
Tabs
TagInput
TextArea
TextInput
Toast
Toggle
Tooltip
Disclosure
Default
This is the disclosure content. It can contain any React components or text. The disclosure starts in a collapsed state by default.
Default Expanded
This disclosure is expanded by default. You can collapse it by clicking on the summary.
Multiple Disclosures
Content for the first section.
Each disclosure maintains its own state independently.
Content for the second section.
Click to expand or collapse each one.
This section starts expanded.
You can have as many disclosures as needed, and mix default states.
Rich Content
Disclosures can contain any content
This includes formatted text, multiple paragraphs, and other components.
Even nested boxes with different styling work perfectly.
The disclosure automatically adjusts its height to fit the content.
Long Summary
The disclosure handles long summary text gracefully, with the chevron icon staying aligned to the right.
No logs yet