A collapsible panel with title and subtitle for organizing content into expandable sections.
import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';
<Accordion>
<AccordionTrigger title="Toggle Panel" />
<AccordionPanel>Your content</AccordionPanel>
</Accordion>Root container for the accordion. Renders a <div> element.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode(state: { isExpanded: boolean }) => ReactNode | - | Content of the accordion. Can be a render function to access expanded state. |
| defaultExpanded | boolean | false | Whether the accordion is expanded on initial render. |
| isExpanded | boolean | - | Controls the expanded state (controlled mode). |
| onExpandedChange | (isExpanded: boolean) => void | - | Called when the expanded state changes. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria Disclosure props.
Trigger component with built-in animated chevron icon. Renders a heading element (defaults to <h3>, configurable via level prop) wrapping a <button>.
| Prop | Type | Default | Description |
|---|---|---|---|
| level | 123456 | 3 | Heading level for accessibility (renders h1-h6). Match your page hierarchy. |
| title | string | - | Primary text displayed in the trigger. |
| subtitle | string | - | Secondary text displayed next to the title. |
| children | ReactNode | - | Custom trigger content. When provided, title and subtitle are ignored. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Panel with the accordion content. Renders a <div> element.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content displayed when the accordion is expanded. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Container for managing multiple accordions. Renders a <div> element.
| Prop | Type | Default | Description |
|---|---|---|---|
| allowsMultiple | boolean | false | Whether multiple accordions can be expanded at the same time. |
| children | ReactNode | - | Accordion components to group together. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria DisclosureGroup props.
Accordions can display a subtitle below the title.
<Accordion>
<AccordionTrigger
title="Advanced Settings"
subtitle="Configure additional options"
/>
<AccordionPanel>
<Text>Your content here</Text>
</AccordionPanel>
</Accordion>Pass custom content as children instead of using the title prop.
<Accordion defaultExpanded>
<AccordionTrigger title="Toggle Panel" />
<AccordionPanel>
<Text>Your content here</Text>
</AccordionPanel>
</Accordion>Use AccordionGroup to allow only one accordion open at a time.
Allows multiple panels to be open simultaneously.
Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Accordion