CollapseButton (Astro)

CollapseButton (Astro)

Display a button that toggles a collapsed element.

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

Astro

import CollapseButton from '@choco/components/CollapseButton.astro';

export const collapse1 = {
  id: 'btnPrimary',
  title: 'View Information'
};

<CollapseButton content={collapse1}>
    Primary Button
</CollapseButton>


export const collapse2 = {
  id: 'btnSuccess',
  title: 'Click to See Suggestions'
  btnColor: 'success'
};

<CollapseButton content={collapse2}>
    Success Button
</CollapseButton>


export const collapse3 = {
  id: 'btnDanger',
  title: 'Click to See Suggestions'
  btnColor: 'danger'
};

<CollapseButton content={collapse3}>
    Success Button
</CollapseButton>

Open By Default

To open the collapsible element on load, pass in isActive: true to the content.

Primary Button open on load.

Astro

import CollapseButton from '@choco/components/CollapseButton.astro';

export const collapse4 = {
  id: 'btnPrimaryOpen',
  title: 'View Information',
  isActive: true
};

<CollapseButton content={collapse4}>
    Primary Button open on load.
</CollapseButton>