<Accordion> Component

listStyle Property

Sets the alternative appearances of the <Accordion>.

The possible values are:

• undefined
• 'regular'
• 'flat'
• 'flush'
• 'joined'
• 'content'
• 'button'
• 'breadcrumb'
• 'numbered'

Here the preview:

orientation Property

Sets the orientation of the <Accordion>.

The possible values are:

• undefined
• 'inline'
• 'block'

Here the preview:

size Property

Defines the alternative size of the <Accordion>.

You can set the size individually for each <AccordionItem>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

Here the preview:

theme Property

Defines the contextual theme of the <Accordion>.

You can set the theme individually for each <AccordionItem>.

The possible values are:

• undefined
• 'primary'
• 'secondary'
• 'success'
• 'info'
• 'warning'
• 'danger'
• 'light'
• 'dark'

Here the preview:

gradient Property

Activates a 3D mode of the <Accordion>.

You can set the gradient individually for each <AccordionItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Accordion>.

You can set the outlined individually for each <AccordionItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Accordion>.

You can set the mild individually for each <AccordionItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

enabled Property

Defines the enabled/disabled state of the <Accordion>.

You can set the enabled individually for each <AccordionItem>.

The possible values are:

• undefined
• true
• false

Here the preview:

inheritEnabled Property

Influences the <Accordion>'s disabled state by <ancestor enabled={false}>.

You can set the inheritEnabled individually for each <AccordionItem>.

The possible values are:

• undefined
• true
• false

Here the preview:

listComponent Property

Overwrites the internal <List> component used as the composition of <Accordion> component.

<Accordion listComponent={
    <MyCustomList />
} />

listItemComponent Property

Overwrites the internal <ListItem> component used as the composition of <AccordionItem>'s header.

<AccordionItem listItemComponent={
    <MyCustomListItem />
} />

bodyComponent Property

Overwrites the internal <ListItem> component used as the composition of <AccordionItem>'s content.

<AccordionItem bodyComponent={
    <MyCustomListItem />
} />