Button Sort

The sort button component is used to allow users to sort a list of items by a specific criteria. It is typically used in tables, lists, or other data focused components. The sort button should have a clear and descriptive label that communicates the criteria by which the list is sorted, such as "Sort by Name" or "Sort by Date".

Example

code

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

<div bp-layout="inline gap:lg">
  <bp-button-sort aria-label="sort"></bp-button-sort>
  <bp-button-sort value="ascending" aria-label="sort"></bp-button-sort>
  <bp-button-sort value="descending" aria-label="sort"></bp-button-sort>
</div>

Disabled

code

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

<div bp-layout="inline gap:lg">
  <bp-button-sort disabled aria-label="sort"></bp-button-sort>
  <bp-button-sort disabled value="ascending" aria-label="sort"></bp-button-sort>
  <bp-button-sort disabled value="descending" aria-label="sort"></bp-button-sort>
</div>

Readonly

code

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

<div bp-layout="inline gap:lg">
  <bp-button-sort readonly aria-label="sort"></bp-button-sort>
  <bp-button-sort readonly value="ascending" aria-label="sort"></bp-button-sort>
  <bp-button-sort readonly value="descending" aria-label="sort"></bp-button-sort>
</div>

Form

code

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

The sort 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 control indicating the current sort state.

Install

NPM

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

CDN

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

Accessibility

Use clear, descriptive labels for the button that communicates its purpose.
Use aria-label or aria-labelledby to provide a text description of the icon for screen readers.
Provide a way for keyboard users to interact with the button, such as by using the tab key.
Provide clear feedback on the sorted criteria and order, such as through the use of an icon or label.

bp-button-sort

Events

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

Properties

Name	Types	Description
`i18n`	`I18nStrings['actions']`
`value`	`ButtonSort`
`readonly`	`boolean`
`disabled`	`boolean`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`i18n`	`I18nStrings['actions']`
`value`	`ButtonSort`
`readonly`	`boolean`
`disabled`	`boolean`