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>
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
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.
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 | |