Components

Accordion

Accordions are used to hide and show large amounts of content

Selected Theme

Select brand or tribe name to preview style

Default

Usage

The accordion component is used to show or hide content. For use this components don’t forget to add import legion-ui

import { Accordion } from 'legion-ui';

Variant

Legion Have 2 varian of Accordion:

Accordion with Left Icon

Warning: Don’t forget to import accordion from legion-ui This sample code to use accordion with Left Icon

import { Accordion } from 'legion-ui';

<Accordion
  id="accordion-one"
  title="Accordion with left icon"
  iconLeft={<DynamicIcon size="16" name="Home" />}
  css={{ marginBottom: '12px' }}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Default of accordion have a bottom border if you don’t want to use the bottom border then you can add property bordered={false} This code sample how to use bordered

import { Accordion } from 'legion-ui';

<Accordion
  id="accordion-one"
  title="Accordion with left icon"
  iconLeft={<DynamicIcon name="Home" />}
  css={{ marginBottom: '12px' }}
  bordered={false}
>

Accordion without icon

Usage Accordion without icon

import { accordion } from 'legion-ui';

<Accordion id="accordion-two" title="Accordion without icon">
  <Card css={{ padding: '24px' }}>
    <Avatar size="large" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
    <div>Accordion with custom content</div>
  </Card>
</Accordion>

Props

property	propType	required	default	description
bordered	`boolean`	-	`true`	Sets accordion bottom border
children	`React.ReactNode`	-	-	Pass all the necessary components here
iconLeft	`React.ReactNode`	-	-	Sets the accordion left icon
id	`String`	`yes`	-	Identify accordion title to its content
title	`String`	`yes`	-	Identify accordion title to its content

Do you have feedback?

Please let us know to make it better

Send Feedback