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.