Accordion

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

Code

import { Accordion, Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Accordion
      defaultOpen
      header={<Typography variant="h4">Order activity</Typography>}
    >
      <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
        <p>Pricing updated by Maria Larsen</p>
        <p>Delivery window changed to Friday</p>
      </div>
    </Accordion>
  );
}

Header Paddings

Code

import { Accordion, Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-5">
      <Accordion
        header={<Typography variant="h4">large</Typography>}
        headerPadding="large"
      >
        <div className="tw:flex tw:flex-col tw:gap-5 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        header={<Typography variant="h4">medium</Typography>}
        headerPadding="medium"
      >
        <div className="tw:flex tw:flex-col tw:gap-5 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        header={<Typography variant="h4">small</Typography>}
        headerPadding="small"
      >
        <div className="tw:flex tw:flex-col tw:gap-5 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>
    </div>
  );
}

Background Themes

Code

import { Accordion, FlexWrapper, Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <FlexWrapper direction="column" gap={20}>
      <Accordion
        bgTheme="white"
        header={<Typography variant="h4">white</Typography>}
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral"
        header={<Typography variant="h4">neutral</Typography>}
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral-inactive"
        header={<Typography variant="h4">neutral-inactive</Typography>}
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="white-header-neutral-body"
        header={<Typography variant="h4">white-header-neutral-body</Typography>}
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="white-header-neutral-inactive-body"
        header={
          <Typography variant="h4">
            white-header-neutral-inactive-body
          </Typography>
        }
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral-header-white-body"
        header={<Typography variant="h4">neutral-header-white-body</Typography>}
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral-inactive-header-white-body"
        header={
          <Typography variant="h4">
            neutral-inactive-header-white-body
          </Typography>
        }
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral-header-neutral-inactive-body"
        header={
          <Typography variant="h4">
            neutral-header-neutral-inactive-body
          </Typography>
        }
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>

      <Accordion
        bgTheme="neutral-inactive-header-neutral-body"
        header={
          <Typography variant="h4">
            neutral-inactive-header-neutral-body
          </Typography>
        }
      >
        <div className="tw:flex tw:flex-col tw:gap-4 tw:p-6">
          <p>Pricing updated by Maria Larsen</p>
          <p>Delivery window changed to Friday</p>
        </div>
      </Accordion>
    </FlexWrapper>
  );
}

Custom Header

Code

import {
  Accordion,
  Button,
  FlexWrapper,
  Icon,
  Typography,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <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

Props

bgTheme

bgTheme?: "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" = "white"

children

children: React.ReactNode

className

className?: string = ""

defaultOpen

defaultOpen?: boolean = false

header

header: React.ReactNode | ((isOpen: boolean) => React.ReactNode)

headerPadding

headerPadding?: "large" | "medium" | "small" = "medium"

isCustomHeader

isCustomHeader?: boolean = false

onToggle

onToggle?: ((isOpen: boolean) => void)

sx

sx?: StyleProps