Collapsible

Usage

import { Collapsible } from '@backstage/ui';

<Collapsible.Root>
    <Collapsible.Trigger render={(props, state) => (
      <Button {...props}>
        {state.open ? 'Close Panel' : 'Open Panel'}
      </Button>
    )} />
    <Collapsible.Panel>Your content</Collapsible.Panel>
</Collapsible.Root>

API reference

Collapsible.Root

Groups all parts of the collapsible. Renders a <div> element.

Collapsible.Trigger

The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend using the render prop to render a custom trigger.

<Collapsible.Trigger render={props => <Button {...props} />} />

Collapsible.Panel

A panel with the collapsible contents. Renders a <div> element.

Examples

Open the panel by default by setting the defaultOpen prop to true.

<Collapsible.Root defaultOpen>
    <Collapsible.Trigger render={(props, state) => (
      <Button {...props}>
        {state.open ? 'Close Panel' : 'Open Panel'}
      </Button>
    )} />
    <Collapsible.Panel>
      <Box>
        <Text>It's the edge of the world and all of Western civilization</Text>
        <Text>The sun may rise in the East, at least it settled in a final location</Text>
        <Text>It's understood that Hollywood sells Californication</Text>
      </Box>
    </Collapsible.Panel>
</Collapsible.Root>

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-CollapsibleRoot
• bui-CollapsibleTrigger
• bui-CollapsiblePanel

Changelog

• 0.3.0 - Add Collapsible component #29617