Sort

Sort enables users to quickly sort a view of objects by a single attribute. Sort is often displayed as a component of the Toolbar.

When the current data is displayed as a table with sortable columns, the sort widget should be hidden and user can sort columns by clicking on the column header. See Table View for more information.

Image of sort

Image of sort

Sort

Image highlighting attribute selector

  1. Sort Selector: Contains a list of the possible attributes by which to sort. Objects may be sorted by any attribute, including properties that are not displayed in the current view. (e.g. attributes in hidden columns, or those that are not displayed in a tile)

  2. Sort Order Toggle: Sort can toggle between ascending and descending order. The icon on this button changes according to the order of the current sort. The default for sort is ascending order.

Icon Class Name Tooltip Text Screenreader Text (aria-label) Comments
fa-sort-alpha-ascending Sort Z to A Sorted A to Z. Toggle to sort Z to A. This icon and text would display regardless of data type. The icon and text use “A to Z” as an example to communicate sort order, and are not intended to indicate type of data that displays in the selected column.
fa-sort-alpha-descending Sort A to Z Sorted Z to A. Toggle to sort A to Z. See comments in previous row.