ComponentsAccordion
Version 0.9.1

Accordion

A component for showing and hiding content with animation.

Usage#

import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';

<Accordion>
  <AccordionTrigger title="Toggle Panel" />
  <AccordionPanel>Your content</AccordionPanel>
</Accordion>

API reference#

Accordion#

Root container for the accordion. Renders a <div> element.

PropTypeDefaultResponsive
children
ReactNode(state: { isExpanded: boolean }) => ReactNode
-No
defaultExpanded
boolean
falseNo
isExpanded
boolean
-No
onExpandedChange
(isExpanded: boolean) => void
-No
className
string
-No
style
CSSProperties
-No

AccordionTrigger#

Trigger component with built-in animated chevron icon. Renders a heading element (defaults to <h3>, configurable via level prop) wrapping a <button>.

PropTypeDefaultResponsive
level
123456
3No
title
string
-No
subtitle
string
-No
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

AccordionPanel#

Panel with the accordion content. Renders a <div> element.

PropTypeDefaultResponsive
className
string
-No
style
CSSProperties
-No

AccordionGroup#

Container for managing multiple accordions. Renders a <div> element.

PropTypeDefaultResponsive
allowsMultiple
boolean
falseNo
className
string
-No
style
CSSProperties
-No

Examples#

With Subtitle#

Here's a view when using both title and subtitle props.

Custom Trigger#

Here's a view when providing custom multi-line content as children.

Default Expanded#

Here's a view when the panel is expanded by default.

It's the edge of the world and all of Western civilization

The sun may rise in the East, at least it settled in a final location

It's understood that Hollywood sells Californication

Group Single Open#

Here's a view when only one accordion can be open at a time.

Group Multiple Open#

Here's a view when multiple accordions can be open simultaneously.

Theming#

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
  • bui-AccordionTrigger
  • bui-AccordionTriggerButton
  • bui-AccordionTriggerTitle
  • bui-AccordionTriggerSubtitle
  • bui-AccordionTriggerIcon
  • bui-AccordionPanel
  • bui-AccordionGroup

Changelog#

  • 0.9.0 - BREAKING: Removed Collapsible component. Migrate to Accordion or use React Aria Disclosure.

Migration Path 1: Accordion (Opinionated Styled Component)#

Accordion provides preset styling with a similar component structure.

- import { Collapsible } from '@backstage/ui';
+ import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';

- <Collapsible.Root>
-   <Collapsible.Trigger render={(props) => <Button {...props}>Toggle</Button>} />
-   <Collapsible.Panel>Content</Collapsible.Panel>
- </Collapsible.Root>

+ <Accordion>
+   <AccordionTrigger title="Toggle" />
+   <AccordionPanel>Content</AccordionPanel>
+ </Accordion>

CSS classes: .bui-CollapsibleRoot → .bui-Accordion, .bui-CollapsibleTrigger → .bui-AccordionTrigger (now on heading element), .bui-CollapsiblePanel → .bui-AccordionPanel

Migration Path 2: React Aria Disclosure (Full Customization)#

For custom styling without preset styles:

import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';

<Disclosure>
  <Button slot="trigger">Toggle</Button>
  <DisclosurePanel>Content</DisclosurePanel>
</Disclosure>;
``` [#31493](https://github.com/backstage/backstage/pull/31493)