The header of an Accordion: a button in a heading that opens and closes it. It carries aria-expanded and aria-controls for the region, and an icon that turns as it opens. It must sit in an Accordion.
<AccordionSummary headingLevel={2}>Shipping</AccordionSummary>
Demos
For usage examples, visit the component demo page: Accordion
Import
import { AccordionSummary } from '@soroush.tech/design-system/Accordion'Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | What the header says. |
expandIcon | ReactNode | the expand_more icon | The icon that turns as it opens. |
headingLevel | `1 | 2 | 3 |
className, data-testid | On the heading. |
Customization
theme.components.AccordionSummary styles the root (the heading), the button, its content and the icon. Its defaultProps set headingLevel.
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.