WUI logo

Accordion

Allows the user to show and hide sections of related content on a page.

version

4.2.0

install

yarn add @welcome-ui/accordion

usage

import { Accordion } from '@welcome-ui/accordion'

About #

Built with Reakit for a better accessibility 🌈

Usage #

<Accordion title="Accordion title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Accordion>
<Accordion
title={
<Box display="flex" alignItems="center">
<Avatar name="accordion" mr="sm" />
<Text as="h3" m="0" fontWeight="bold">
Accordion title
</Text>
</Box>
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Accordion>

Visible at start #

Add visible property to open at start the accordion

<Accordion title="Accordion title" visible>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</Accordion>

With a custom icon #

Customize the icon with a node element on property icon

<Accordion title="Accordion title" icon={<PlayIcon />}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</Accordion>

Properties #

NameType(s)DefaultRequired
title
string
Element
icon
Element
<RightIcon size="sm" />
visible
Boolean
false

Packages #

Dependencies #
Peer dependencies #

Previous

Text