Collapse Button

Render button or link with dropdown icon and collapsible content underneath

• Import

  import { CollapseButton } from '@smile/haring-react';
• Extends Button Collapse
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Usage

A collapsible button with content, combining Mantine's Button and Collapse. The button can be selected, with a dropdown icon on the right that opens the collapsed content underneath.

Uncontrolled

import { CollapseButton } from '@smile/haring-react';

<CollapseButton
  defaultOpened=true
  isOpenOnSelect=false
  label="Home"
  leftIcon=<HouseLine/>
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
  varius bibendum dui non imperdiet. Donec vehicula fringilla lorem
  vitae rutrum. Etiam malesuada ullamcorper aliquam. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia
  curae; Cras elit lacus, viverra vitae risus et, pharetra tincidunt
  felis. Aliquam erat volutpat. In vitae nibh eu turpis commodo
  luctus vitae id libero. Curabitur eget nunc volutpat, luctus quam
  rutrum, ultricies tellus. Integer diam nulla, vestibulum id enim
  quis, molestie luctus magna. Phasellus et rhoncus augue, id
  maximus mi. Vivamus consequat quam tristique ex laoreet, ut
  eleifend eros sodales. Cras bibendum enim dolor, id rutrum urna
  vestibulum non.
</CollapseButton/>

Controlled

import { CollapseButtonControlled } from '@smile/haring-react';

const [opened, setOpened] = useState(true);

<CollapseButtonControlled
  isOpenOnSelect=false
  label="Home"
  leftIcon=<HouseLine/>
  onCollapseChange={() => setOpened(!opened)}
  opened={opened}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
  varius bibendum dui non imperdiet. Donec vehicula fringilla lorem
  vitae rutrum. Etiam malesuada ullamcorper aliquam. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia
  curae; Cras elit lacus, viverra vitae risus et, pharetra tincidunt
  felis. Aliquam erat volutpat. In vitae nibh eu turpis commodo
  luctus vitae id libero. Curabitur eget nunc volutpat, luctus quam
  rutrum, ultricies tellus. Integer diam nulla, vestibulum id enim
  quis, molestie luctus magna. Phasellus et rhoncus augue, id
  maximus mi. Vivamus consequat quam tristique ex laoreet, ut
  eleifend eros sodales. Cras bibendum enim dolor, id rutrum urna
  vestibulum non.
</CollapseButtonControlled/>

Storybook Docs

Props

Uncontrolled

Name	Type	Default	Description
children	ReactNode	-	Content either collapsed or opened under Button
component	ElementType	button	Custom component to use around the label
componentProps	ComponentPropsWithoutRef	-	Additional props for the custom component
defaultOpened	boolean	false	Initial value of the Collapse, controls if initially opened or closed
id	number | string	-	Optional ID given when onSelect is called
isOpenOnSelect	boolean	true	When true, clicking/selecting anywhere on the button will also open theCollapse. When false, only clicking the collapse icon will open the Collapse
label	ReactNode	-	Button label
level	number	0	Used in nested menus such as SidebarMenu, levels 0, 1 and 2 have slightly different styles
indentation	"simple" | "line"	"simple"	Used in nested menus such as SidebarMenu, when "line" will display a vertical line to the left of the button. When "simple" same thing without line
onSelect	(id?: number | string) => void	-	Called when button is selected (does not include the collapse icon)
selected	boolean	-	Controlled value determining if the button is selected, affects the button style
...	-	-	extends Button props

Controlled

Only using <CollapseButtonControlled>, extends the uncontrolled <CollapseButton> props.

Name	Type	Default	Description
collapseProps	Partial<CollapseProps>	-	Passed to the Collapse, extends Mantine's Collapse Props
onCollapseChange	ElementType	-	Called when the dropdown icon is clicked
opened *	boolean	false	Controlled value of Collapse, controls of Collapse is opened or closed
...	-	-	extends uncontrolled CollapseButton props