CollapseButton (Astro)
CollapseButton (Astro)
Display a button that toggles a collapsed element.
:choco-info: Astro Only Documentation Below
The documentation below covers how to use the
<CollapseButton />Astro Component from choco-astro.
Overview
The <CollapseButton /> will display a button with a toggle. When clicked, the button will expand a collapsible element.
General Usage
The default btnColor of the <CollapseButton /> is primary and does not need to be passed in.
Primary Button
Success Button
Danger Button
import CollapseButton from '@choco/components/CollapseButton.astro';
export const collapse1 = {
id: 'btnPrimary',
title: 'View Information'
};
Primary Button
export const collapse2 = {
id: 'btnSuccess',
title: 'Click to See Suggestions'
btnColor: 'success'
};
Success Button
export const collapse3 = {
id: 'btnDanger',
title: 'Click to See Suggestions'
btnColor: 'danger'
};
Success Button
Open By Default
To open the collapsible element on load, pass in isActive: true to the content.
Primary Button open on load.
import CollapseButton from '@choco/components/CollapseButton.astro';
export const collapse4 = {
id: 'btnPrimaryOpen',
title: 'View Information',
isActive: true
};
Primary Button open on load.