import {RiverAccordion} from '@primer/react-brand'Examples
Default
Loading
Visual alignment
Use the align prop to control the position of the visuals. Setting align="end" will invert the default position of the visuals and content.
Loading
Component props
RiverAccordion Required
| Name | Type | Default | Description |
|---|---|---|---|
children | 'RiverAccordion.Item[]' | Multiple RiverAccordion.Item components | |
align | 'start''end' | 'start' | Controls the position of the visuals relative to the accordion content |
RiverAccordion extends the HTML div element and supports all div props.
RiverAccordion.Item Required
| Name | Type | Default | Description |
|---|---|---|---|
children | 'RiverAccordion.Heading''RiverAccordion.Content''RiverAccordion.Visual' | Must include all three listed components |
RiverAccordion.Item extends the HTML div element and supports all div props.
RiverAccordion.Heading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | string | Heading text |
RiverAccordion.Heading extends the Heading component and supports all Heading props.
RiverAccordion.Content Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement[] | Content components |
RiverAccordion.Content extends the HTML div element and supports all div props.
RiverAccordion.Visual Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement | Visual content (e.g., image) |
RiverAccordion.Visual extends the HTML div element and supports all div props.