Accordion
Collapsable element that initially shows a header and shows the full text on collapse.
Item 1
Item 2
Item 3
Import
JSX
Usage
JSX
Variants
Chevron Empty
Item 1
Item 2
Item 3
JSX
Plus
Item 1
Item 2
Item 3
JSX
Plus Empty
Item 1
Item 2
Item 3
JSX
Custom Headers
Item 1
Item 1
Item 1
JSX
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
background | "filled" | "empty" | "filled" | Enable/disable transparant background |
toggleIcon | "plus" | "chevron" | "chevron" | Icon that toggles the collapsing text |
width | string | "100%" | Width of the accordion items |
minWidth | string | "auto" | Minimum width of the accordion items |
maxWidth | string | "auto" | Maximum width of the accordion items |
children* | ReactNode | - | Expecting one or more <Accordion.Item> components |
Item
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | Expecting <Accordion.Header> |
itemKey | string | useId() | Unique identifier for this item |
Header
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | Header text of an item |
Content
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | JSX.Element | - | Paragraph text or component of an item |