components
Accordion
v.1.0.0 | Saturn
StorybookStackable list elements that can be interacted with in order to unweil or hide content.
import { Accordion, TextComponentType } from '@kubit-ui-web/react-components'
12345678
<Accordion variant="DEFAULT" title={{ content: 'Accordion' }} triggerIcon={{ icon: 'ICON_CHEVRON_DOWN', ['aria-label']: 'Trigger Icon' }} triggerComponent="h5" > <div style={{ paddingBottom: '0.5rem' }}>Content</div> </Accordion>
- A component is controlled when it's managed by its parent using props.
- A component is uncontrolled when it's managed by its own local state.
Learn more about controlled and uncontrolled components in the Kubit documentation.
Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project. We have set this predefine style for its quick use, access them through the variant prop:
12345678910
<Accordion
variant="DEFAULT"
title={{ content: 'Title' }}
triggerIcon={{ icon: 'ICON_CHEVRON_DOWN', ['aria-label']: 'Trigger Icon' }}
titleIcon={{ icon: 'ICON_LOCK', altText: 'Title Icon' }}
defaultOpen={true}
triggerComponent="h5"
subHeaderContent="Subheader"
headerRightContent="Header right"
footerContent="Footer"