Accordion

Accordion component is use to display large amount of content in a compress and progressive way.

Examples

Default

some header

Description

Secondary info

Button

some header

This is just a placeholder

<Box>
  <Accordion
    heading="some header"
    description="Description"
    buttonLabel="Button"
    info="Secondary info"
  >
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" defaultExpanded>
    <div>This is just a placeholder</div>
  </Accordion>
</Box>

<Box>
  <Accordion
    heading="some header"
    description="Description"
    buttonLabel="Button"
    info="Secondary info"
  >
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" defaultExpanded>
    <div>This is just a placeholder</div>
  </Accordion>
</Box>

Compact

some header

Description

some header

<Box>
  <Accordion
    heading="some header"
    description="Description"
    variant="compact"
  >
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" variant="compact">
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" variant="compact">
    <div>This is just a placeholder</div>
  </Accordion>
</Box>

<Box>
  <Accordion
    heading="some header"
    description="Description"
    variant="compact"
  >
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" variant="compact">
    <div>This is just a placeholder</div>
  </Accordion>
  <Accordion heading="some header" variant="compact">
    <div>This is just a placeholder</div>
  </Accordion>
</Box>

onExpand / onCollapse

some header

Description

Secondary info

const OnExpandExample = () => {
    const [label, setLabel] = useState('Close')
    return (
        <Accordion heading="some header" description="Description" buttonLabel={label} info="Secondary info" onExpand={() => setLabel('Open')} onCollapse={() => setLabel('Close')} >
            <div>
                This is just a placeholder
            </div>
        </Accordion>
    )
}

API

Name	Type	Default
heading	string \| undefined Accordion title	-
description	string \| undefined Accordion description	-
info	string \| undefined Accordion information	-
buttonLabel	string \| undefined Accordion button label	-
variant	'compact' \| 'default' Accordion variant	default
defaultExpanded	boolean \| undefined	false
onExpand	callback \| undefined Execute callback function on accordion expand	-
onCollapse	callback \| undefined Execute callback function on accordion collapse	-