Button Expand

The expand button component is used to reveal and hide additional content, such as a dropdown menu or a nested list.

Example

Provides a button to expand/collapse content sections.

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

Shows expand button in disabled state.

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

Shows expand button in readonly state.

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

Shows expand button integration with form data.

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

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`value`	`string`	Defines the value of the control when used in forms, submitted when the button is checked
`checked`	`boolean`	Controls the expanded state of the button, determining whether associated content is shown or hidden
`readonly`	`boolean`	Sets the button as read-only, preventing state changes while maintaining focusability
`disabled`	`boolean`	Controls whether the button is disabled, preventing all user interactions and focus
`name`	`string`	represents the name of the current element as a string.
`orientation`	`'vertical' \| 'horizontal'`	Controls the icon direction based on expand context, either vertical (down/right) or horizontal (left/right)
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`value`	`string`	Defines the value of the control when used in forms, submitted when the button is checked
`checked`	`boolean`	Controls the expanded state of the button, determining whether associated content is shown or hidden
`readonly`	`boolean`	Sets the button as read-only, preventing state changes while maintaining focusability
`disabled`	`boolean`	Controls whether the button is disabled, preventing all user interactions and focus
`orientation`	`'vertical' \| 'horizontal'`	Controls the icon direction based on expand context, either vertical (down/right) or horizontal (left/right)
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements

CSS Properties

Name	Types	Description
`--animation-duration`

Slots

Name	Types	Description
`default`		slot for custom bp-icon