Buttons

React-Admin provides button components for all the common uses.

Navigation Buttons

These buttons allow users to navigate between the various react-admin views.

<EditButton>

Opens the Edit view of the current record:

import { EditButton } from 'react-admin';

const CommentEditButton = () => <EditButton label="Edit comment" />;

<EditButton> is based on react-admin’s base <Button>, so it’s responsive, accessible, and the label is translatable.

It also supports all the other <Button> props.

Tip: You can use it as <Datagrid> child, too. However, you should use the <Datagrid rowClick="edit"> prop instead to avoid using one column for the Edit button.

Tip: If you want to link to the Edit view manually, use the /{resource}/{record.id} location.

<ShowButton>

Opens the Show view of the current record:

import { ShowButton } from 'react-admin';

const CommentShowButton = () => <ShowButton label="Show comment" />;

<ShowButton> is based on react-admin’s base <Button>, so it’s responsive, accessible, and the label is translatable.

It also supports all the other <Button> props.

Tip: You can use it as <Datagrid> child with no props too. However, you should use the <Datagrid rowClick="show"> prop instead to avoid using one column for the Edit button.

Tip: If you want to link to the Show view manually, use the /{resource}/{record.id}/show location.

<CreateButton>

Opens the Create view of the current resource:

import { CreateButton } from 'react-admin';

const CommentCreateButton = () => <CreateButton label="Create comment" />;

<CreateButton> is based on react-admin’s base <Button>, so it’s responsive, accessible, and the label is translatable. On mobile, it turns into a “Floating Action Button”.

It also supports all the other <Button> props.

Tip: If you want to link to the Create view manually, use the /{resource}/create location.

sx: CSS API

To override the style of all instances of <CreateButton> using the Material UI style overrides, use the RaCreateButton key.

<ListButton>

Opens the List view of a given resource:

import { ListButton } from 'react-admin';

const CommentListButton = () => <ListButton label="Comments" />;

<ListButton> is based on react-admin’s base <Button>, so it’s responsive, accessible, and the label is translatable.

By default, react-admin doesn’t display a <ListButton> in Edit and Show views action toolbar. This saves visual clutter, and users can always use the back button. You can add it by specifying your own actions:

// linking back to the list from the Edit view
import { TopToolbar, ListButton, ShowButton, Edit } from 'react-admin';

const PostEditActions = () => (
    <TopToolbar>
        <ListButton />
        <ShowButton />
    </TopToolbar>
);

export const PostEdit = () => (
    <Edit actions={<PostEditActions />}>
        ...
    </Edit>
);

It also supports all the other <Button> props.

Tip: If you want to link to the List view manually, use the /{resource} location.

List Buttons

The following buttons are designed to be used in List views.

<ExportButton>

Exports the current list, with filters applied, but without pagination. It relies on the exporter function passed to the <List> component, via the ListContext. It’s disabled for empty lists.

By default, the <ExportButton> is included in the List actions.

import { CreateButton, ExportButton, TopToolbar } from 'react-admin';

const PostListActions = () => (
    <TopToolbar>
        <PostFilter context="button" />
        <CreateButton />
        <ExportButton />
    </TopToolbar>
);

export const PostList = () => (
    <List actions={<PostListActions />}>
        ...
    </List>
);

<BulkExportButton>

Same as <ExportButton>, except it only exports the selected rows instead of the entire list. To be used inside the <Datagrid bulkActionButtons> prop.

import * as React from 'react';
import { Fragment } from 'react';
import { BulkDeleteButton, BulkExportButton } from 'react-admin';

const PostBulkActionButtons = () => (
    <Fragment>
        <BulkExportButton />
        <BulkDeleteButton />
    </Fragment>
);

export const PostList = () => (
    <List>
        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
            ...
        </Datagrid>
    </List>
);

<BulkDeleteButton>

Deletes the selected rows. To be used inside the <Datagrid bulkActionButtons> prop (where it’s enabled by default).

import * as React from 'react';
import { Fragment } from 'react';
import { BulkDeleteButton, BulkExportButton } from 'react-admin';

const PostBulkActionButtons = () => (
    <Fragment>
        <BulkExportButton />
        <BulkDeleteButton />
    </Fragment>
);

export const PostList = () => (
    <List>
        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
            ...
        </Datagrid>
    </List>
);

<FilterButton>

This button is an internal component used by react-admin in the Filter button/form combo.

sx: CSS API

To override the style of all instances of <FilterButton> using the Material UI style overrides, use the RaFilterButton key.

Record Buttons

<DeleteButton>

<DeleteWithConfirmButton>

Delete the current record after a confirm dialog has been accepted. To be used inside a <Toolbar/> component.

import * as React from 'react';
import { DeleteWithConfirmButton, Toolbar, Edit, SaveButton,useRecordContext } from 'react-admin';

const EditToolbar = props => {
    const record = useRecordContext();

    <Toolbar {...props}>
        <SaveButton/>
        <DeleteWithConfirmButton
            confirmContent="You will not be able to recover this record. Are you sure?"
            translateOptions={{ name: record.name }}
        />
    </Toolbar>
};

const MyEdit = () => (
    <Edit>
        <SimpleForm toolbar={<EditToolbar />}>
            ...
        </SimpleForm>        
    </Edit>    
);

<CloneButton>

Performance

disableRipple

The ripple effect can cause performance issues for large datagrids. It’s possible to remove the ripple effect from within your Material UI theme. The Material UI docs provide instructions on how to do this.

It’s worth noting that removing the ripple will cause accessibility issues, including a lack of focus states during tab navigating for components like BooleanInput and CheckboxGroupInput.

Note: The disableRipple was set to true in React Admin for a time, but was reimplemented due to accessibility concerns. If you’d like to reimplement the static ripple colour effect, you can use the React Admin’s previous implementation as a starting point. The Material UI docs also gives details on how to reimplement focus styles using the Mui-focusVisible class.

Miscellaneous

<Button>

Base component for most react-admin buttons. Responsive (displays only the icon with a tooltip on mobile) and accessible.

Other props are passed down to the underlying Material UI <Button>.

sx: CSS API

To override the style of all instances of <Button> using the Material UI style overrides, use the RaButton key.

<RefreshButton>

<SkipNavigationButton>

sx: CSS API

To override the style of all instances of <SkipNavigationButton> using the Material UI style overrides, use the RaSkipNavigationButton key.

<MenuItemLink>

The <MenuItemLink> component displays a menu item with a label and an icon - or only the icon with a tooltip when the sidebar is minimized. It also handles the automatic closing of the menu on tap on mobile.

Additional props are passed down to the underling Material UI <MenuItem> component.

You can create a custom menu component using the <DashboardMenuItem> and <MenuItemLink> components:

// in src/Menu.js
import * as React from 'react';
import { DashboardMenuItem, Menu, MenuItemLink } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
import ChatBubbleIcon from '@mui/icons-material/ChatBubble';
import PeopleIcon from '@mui/icons-material/People';
import LabelIcon from '@mui/icons-material/Label';

export const Menu = (props) => (
    <Menu {...props}>
        <DashboardMenuItem />
        <MenuItemLink to="/posts" primaryText="Posts" leftIcon={<BookIcon />}/>
        <MenuItemLink to="/comments" primaryText="Comments" leftIcon={<ChatBubbleIcon />}/>
        <MenuItemLink to="/users" primaryText="Users" leftIcon={<PeopleIcon />}/>
        <MenuItemLink to="/custom-route" primaryText="Miscellaneous" leftIcon={<LabelIcon />}/>
    </Menu>
);

To use this custom menu component, pass it to a custom Layout:

// in src/Layout.js
import { Layout } from 'react-admin';
import { Menu } from './Menu';

export const Layout = (props) => <Layout {...props} menu={Menu} />;

Then, use this layout in the <Admin> layout prop:

// in src/App.js
import { Layout }  from './Layout';

const App = () => (
    <Admin layout={Layout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
        // ...
    </Admin>
);

See The theming documentation for more details.

Tip: If you need a multi-level menu, or a Mega Menu opening panels with custom content, check out the ra-navigation module (part of the Enterprise Edition)

sx: CSS API

To override the style of all instances of <MenuItemLink> using the Material UI style overrides, use the RaMenuItemLink key.

<UserMenu>

sx: CSS API

To override the style of all instances of <UserMenu> using the Material UI style overrides, use the RaUserMenu key.

See The theming documentation for more details.