Accordion

The Accordion component displays vertically stacked collapsible panels. It supports single or multiple expanded items, disabled sections, flush styling, and Bootstrap-compatible utility props.

Import

import { Accordion } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Default active item

Use defaultActiveKey to specify which item should be expanded initially.

Multiple open items

Enable multiple expanded panels with the alwaysOpen prop.

Flush

Remove background, borders, and rounded corners with the flush prop.

Disabled item

Disable interaction for specific accordion sections using the disabled prop.

Utility props

All utility props provided by Prime are supported.

API

Accordion

Prop	Type	Default	Description
children	ReactNode	—	Accordion content.
className	string | object | array	—	Additional CSS classes.
style	object	—	Inline styles.
flush	boolean	false	Removes default background, borders, and rounded corners.
defaultActiveKey	string | string[]	""	Initially expanded item key or keys.
alwaysOpen	boolean	false	Allows multiple items to remain expanded.

Accordion.Item

Prop	Type	Default	Description
children	ReactNode	—	Item content.
itemKey	string	""	Unique item identifier.
disabled	boolean	false	Disables expansion.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Accordion.Header

Prop	Type	Default	Description
children	ReactNode	—	Header content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Accordion.Body

Prop	Type	Default	Description
children	ReactNode	—	Body content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Accordion.Button

Prop	Type	Default	Description
children	ReactNode	—	Button content.
collapsed	boolean	true	Controls collapsed state styling.
disabled	boolean	false	Disables the button.
onClick	function	—	Click callback.
className	string	—	Additional CSS classes.

Accordion.Collapse

Prop	Type	Default	Description
children	ReactNode	—	Collapsible content.
open	boolean	false	Controls expanded state.
timeout	number	350	Collapse animation duration.