Some List views don’t have a natural UI for sorting - e.g. the <SimpleList>, or a list of images, don’t have column headers like the <Datagrid>. For these cases, react-admin offers the <SortButton>, which displays a dropdown list of fields that the user can choose to sort on.


<SortButton> requires a fields prop, containing the list of field names it should allow to sort on. For instance, here is how to offer a button to sort on the reference, sales, and stock fields:

import * as React from 'react';
import { TopToolbar, SortButton, CreateButton, ExportButton } from 'react-admin';

const ListActions = () => (
        <SortButton fields={['reference', 'sales', 'stock']} />
        <CreateButton />
        <ExportButton />


Prop Required Type Default Description
fields Required string[] - List of fields to offer sort on
className Optional string - class name for the button container
icon Optional ReactElement <ArrowDropDownIcon> iconElement, e.g. <CommentIcon />
label Optional string ‘ra.sort.sort_by’ label or translation message to use
sx Optional SxProps - Styling


The className prop is passed down to the button container. Use it to customize the button style.

    fields={['reference', 'sales', 'stock']}


The fields prop expects an array of strings. Each string is the name of a field to sort on. The <SortButton> renders the corresponding menu item depending on the current sort order (ASC by default, or DESC if the current sort field is active).

<SortButton fields={['reference', 'sales', 'stock']} />


You can customize the icon rendered on the left of the button by passing an icon prop.

    fields={['reference', 'sales', 'stock']}
    icon={<SortIcon />}


You can customize the label of the button by passing a label prop.

    fields={['reference', 'sales', 'stock']}
    label="Sort by"


You can override the style of <SortButton> and its inner components thanks to the sx property (see the sx documentation for details).

    fields={['reference', 'sales', 'stock']}
        mx: 1,
        '& .MuiButton-root': {
            color: 'text.secondary',

This property accepts the following subclasses:

Rule name Description
&.RaSortButton-root Applied to the root span element