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-AccordionAccordion Breaking Simplified the neutral background prop API for container components. The explicit neutral-1, neutral-2, neutral-3, and neutral-auto values have been removed from ProviderBg. They are replaced by a single 'neutral' value that always auto-increments from the parent context, making it impossible to skip or pin to an explicit neutral level. #33002
Migration Guide:
Replace any explicit bg="neutral-1", bg="neutral-2", bg="neutral-3", or bg="neutral-auto" props with bg="neutral". To achieve a specific neutral level in stories or tests, use nested containers — each additional bg="neutral" wrapper increments by one level.
// Before
<Box bg="neutral-2">...</Box>
// After
<Box bg="neutral">
<Box bg="neutral">...</Box>
</Box>
Accordion Made Accordion a bg provider so nested components like Button auto-increment their background level. Updated useDefinition to resolve bg propDef defaults for provider components. #32935
Accordion Fixed focus ring styles to use React Aria's [data-focus-visible] data attribute instead of the native CSS :focus-visible pseudo-class. This ensures keyboard focus rings render reliably when focus is managed programmatically by React Aria (e.g. inside a GridList, Menu, or Select). #33358