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'

View package View source

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 #

Name	Type(s)	Default
title	string Element
icon	Element	<RightIcon size="sm" />
visible	Boolean	false

Packages #

Dependencies #

@welcome-ui/icons.right [^4.2.0]

@welcome-ui/system [^4.2.0]

react-animate-height [^2.0.23]

reakit [^1.3.11]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Text

Avatar