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.

Example

Enables sorting of data in ascending, descending, or default order.

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

Shows sort button in disabled state.

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

Shows sort button in readonly state.

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

Shows sort button integration with form data.

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
`value`	`ButtonSort`	Defines the current sort direction state, cycling through none, ascending, and descending
`readonly`	`boolean`	Sets the button as read-only, preventing sort 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.
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`value`	`ButtonSort`	Defines the current sort direction state, cycling through none, ascending, and descending
`readonly`	`boolean`	Sets the button as read-only, preventing sort state changes while maintaining focusability
`disabled`	`boolean`	Controls whether the button is disabled, preventing all user interactions and focus
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements

CSS Properties

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