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

Compact

some header

Description

some header

some header

onExpand / onCollapse

some header

Description

Secondary info

Close

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

NameTypeDefault
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
-
Table of contents
ExamplesAPI