lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow 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="secondary">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
valuestringdetermines initial value of the control
checkedbooleandetermines whether element is checked
readonlyboolean
disabledbooleandetermines if element is mutable or focusable
orientation'vertical' | 'horizontal'
i18nI18nStrings['actions']
formAssociatedboolean

Attributes

NameTypesDescription
valuestringdetermines initial value of the control
checkedbooleandetermines whether element is checked
readonlyboolean
disabledbooleandetermines if element is mutable or focusable
orientation'vertical' | 'horizontal'
i18nI18nStrings['actions']

CSS Properties

NameTypesDescription
--animation-duration

Slots

NameTypesDescription
defaultslot for custom bp-icon