Create Next App

BASuite

BAButton BAInput BABox BACheckbox BACollapse BADate BAFormElement

BACollapse

An expandable/collapsible container component with customizable label, icon, and content area.

Basic Collapse

With Icon

Initially Expanded

Opened by default

Example:

 
import { BACollapse } from "basuite"; 
import { SettingOutlined } from "@ant-design/icons"; 

<> 
    <BACollapse label="Basic Collapse"> 
        <p>Content inside collapse</p> 
    </BACollapse> 
    <BACollapse label="With Icon" icon={<SettingOutlined />}> 
        <p>Settings content here</p> 
    </BACollapse> 
    <BACollapse label="Initially Expanded" expand> 
        <p>Opened by default</p> 
    </BACollapse> 
</>

Props:

Name	Type	Description	Default
label	string	Text displayed in the collapse header.
children	React.ReactNode	Content to render inside the collapse panel.
icon	React.ReactNode	Optional icon displayed before the label.
expand	boolean	Controls whether the collapse is initially open.	false
labelClick	() => void	Callback triggered when the header label is clicked.