Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The expand button component is used to reveal and hide additional content, such as a dropdown menu or a nested list. The expand button should have a clear and descriptive label that communicates its purpose, such as "Expand" or "Show More".

Example

code
<script type="module">
import '@blueprintui/components/include/button-expand.js';
</script>

<div bp-layout="inline gap:lg">
<bp-button-expand></bp-button-expand>
<bp-button-expand checked></bp-button-expand>
</div>

Disabled

code
<script type="module">
import '@blueprintui/components/include/button-expand.js';
</script>

<div bp-layout="inline gap:lg">
<bp-button-expand disabled></bp-button-expand>
<bp-button-expand></bp-button-expand>
</div>

Readonly

code
<script type="module">
import '@blueprintui/components/include/button-expand.js';
</script>

<div bp-layout="inline gap:lg">
<bp-button-expand readonly></bp-button-expand>
<bp-button-expand></bp-button-expand>
</div>

Form

falseSubmit
code
<form id="expand-button-form" bp-layout="block gap:md">
<bp-button-expand name="expand" aria-label="expand"></bp-button-expand>
<span bp-layout="block:center">false</span>
<bp-button type="submit" action="outline">Submit</bp-button>
</form>
<script type="module">
import '@blueprintui/components/include/button-expand.js';
const button = document.querySelector('#expand-button-form bp-button-expand');
const form = document.querySelector('form');
button.addEventListener('change', (e) => (document.querySelector('#expand-button-form span').innerHTML = e.target.checked));
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log('submit', Object.fromEntries(new FormData(form)));
});
</script>

The expand button is a form control type which means it can be part of FormData in form elements. By default the control is stateless however, if the control has a name attribute, it will be included in the form data as a stateful boolean control indicating whether the button is expanded or not.

Install

NPM

// npm package
import '@blueprintui/components/include/button-expand.js';

CDN

<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-expand.js/+esm';
</script>

Accessibility

  • Use a clear, descriptive supporting text or aria-label that communicates its purpose.
  • Use appropriate color contrast to make sure the text is easily readable for users with visual impairments.
  • Use aria-controls to indicate the state of the expand button (open or closed) and the content it controls.
  • Provide a way for keyboard users to interact with the expand button, such as by using the enter or space key.

bp-button-expand

Events

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
valuestring
checkedboolean
readonlyboolean
disabledboolean
action'vertical' | 'horizontal'
i18nI18nStrings['actions']
formAssociatedboolean

Attributes

NameTypesDescription
valuestring
checkedboolean
readonlyboolean
disabledboolean
action'vertical' | 'horizontal'
i18nI18nStrings['actions']

CSS Properties

NameTypesDescription
--animation-duration

Slots

NameTypesDescription
defaultslot for custom bp-icon