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:md">
  <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>

The disabled attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.

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="secondary">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
`accessor`		determines if element is mutable or focusable
`value`	`ButtonSort`
`readonly`	`boolean`
`disabled`	`boolean`
`i18n`	`I18nStrings['actions']`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`accessor`		determines if element is mutable or focusable

CSS Properties

Name	Types	Description
`--width`
`--height`
`--color`
`--cursor`
`--background`
`--padding`
`--outline`
`--outline-offset`
`--border`
`--gap`