Button Expand

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

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`	determines initial value of the control
`checked`	`boolean`	determines whether element is checked
`readonly`	`boolean`
`disabled`	`boolean`	determines if element is mutable or focusable
`orientation`	`'vertical' \| 'horizontal'`
`i18n`	`I18nStrings['actions']`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`value`	`string`	determines initial value of the control
`checked`	`boolean`	determines whether element is checked
`readonly`	`boolean`
`disabled`	`boolean`	determines if element is mutable or focusable
`orientation`	`'vertical' \| 'horizontal'`
`i18n`	`I18nStrings['actions']`

CSS Properties

Name	Types	Description
`--animation-duration`

Slots

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