Accordion

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

Accordion displays expandable content with configurable header spacing, background themes, and optional custom header rendering.

Primary

Code

<Accordion
  defaultOpen
  header={
    <FlexWrapper align="center" gap={16} justify="space-between">
      <Typography variant="h4">Order activity</Typography>
    </FlexWrapper>
  }
>
  <FlexWrapper className="p-24" direction="column" gap={16}>
    <FlexWrapper>Pricing updated by Maria Larsen</FlexWrapper>
    <FlexWrapper>Delivery window changed to Friday</FlexWrapper>
  </FlexWrapper>
</Accordion>

Header Paddings

Code

<FlexWrapper direction="column" gap={20}>
  {["large", "medium", "small"].map((headerPadding) => (
    <FlexWrapper gap={16} justify="space-between" key={headerPadding}>
      <Typography variant="h6">{headerPadding}</Typography>

      <FlexWrapper align="center" direction="column" gap={20}>
        <Accordion
          defaultOpen
          header={
            <FlexWrapper align="center" gap={16} justify="space-between">
              <Typography variant="h4">Order activity</Typography>
            </FlexWrapper>
          }
          headerPadding={headerPadding}
        >
          <FlexWrapper className="p-24" direction="column" gap={16}>
            <FlexWrapper>Pricing updated by Maria Larsen</FlexWrapper>
            <FlexWrapper>Delivery window changed to Friday</FlexWrapper>
          </FlexWrapper>
        </Accordion>
      </FlexWrapper>
    </FlexWrapper>
  ))}
</FlexWrapper>

Background Themes

Code

<FlexWrapper direction="column" gap={20}>
  {[
    "white",
    "neutral",
    "neutral-inactive",
    "white-header-neutral-body",
    "white-header-neutral-inactive-body",
    "neutral-header-white-body",
    "neutral-inactive-header-white-body",
    "neutral-header-neutral-inactive-body",
    "neutral-inactive-header-neutral-body",
  ].map((theme) => (
    <FlexWrapper gap={16} justify="space-between" key={theme}>
      <Typography variant="h6">{theme}</Typography>

      <FlexWrapper align="center" direction="column" gap={20}>
        <Accordion
          bgTheme={theme}
          defaultOpen
          header={
            <FlexWrapper align="center" gap={16} justify="space-between">
              <Typography variant="h4">Order activity</Typography>
            </FlexWrapper>
          }
        >
          <FlexWrapper className="p-24" direction="column" gap={16}>
            <FlexWrapper>Pricing updated by Maria Larsen</FlexWrapper>
            <FlexWrapper>Delivery window changed to Friday</FlexWrapper>
          </FlexWrapper>
        </Accordion>
      </FlexWrapper>
    </FlexWrapper>
  ))}
</FlexWrapper>

Custom Header

Code

<Accordion
  header={(isOpen) => (
    <FlexWrapper align="center" gap={16} justify="space-between">
      <Icon name={isOpen ? "arrow-up-2" : "arrow-down-2"} size="16" />
      <Typography variant="h4">Order activity</Typography>
      <Icon name={isOpen ? "arrow-up-2" : "arrow-down-2"} size="16" />
      <Button onClick={() => {}}>View order</Button>
      <Icon name={isOpen ? "arrow-up-2" : "arrow-down-2"} size="16" />
    </FlexWrapper>
  )}
  isCustomHeader
>
  <FlexWrapper className="p-24" direction="column" gap={16}>
    <FlexWrapper>Pricing updated by Maria Larsen</FlexWrapper>
    <FlexWrapper>Delivery window changed to Friday</FlexWrapper>
  </FlexWrapper>
</Accordion>

API

Accordion

Name	Type/Description
bgTheme = "white"	"white" | "neutral" | "neutral-inactive" | "white-header-neutral-body" | "white-header-neutral-inactive-body" | "neutral-header-white-body" | "neutral-inactive-header-white-body" | "neutral-header-neutral-inactive-body" | "neutral-inactive-header-neutral-body" | undefined
className = ""	string | undefined
defaultOpen = false	boolean | undefined
header	ReactNode | ((isOpen: boolean) => ReactNode)
headerPadding = "medium"	"small" | "large" | "medium" | undefined
isCustomHeader = false	boolean | undefined
onToggle	((isOpen: boolean) => void) | undefined
sx	StyleProps | undefined