EditButton

Link button to the edit page of the current record.

Usage

Use it inside a RecordContext, for example in the actions of a <Show> view, or in the rows of a <DataTable>.

import { DataTable, EditButton } from "@/components/admin";
 
const PostList = () => (
  <DataTable>
    <DataTable.Col source="title" />
    <DataTable.Col source="author" />
    <DataTable.Col source="published_at" />
    <DataTable.Col>
      <EditButton />
    </DataTable.Col>
  </DataTable>
);

On click, the button navigates to the edit route of the current resource and record (e.g., /posts/123/edit).

Props

icon

Replaces the default <Pencil /> shown alongside the label. Pass any React node — typically another lucide-react icon.

import { FilePen } from "lucide-react";
 
<EditButton icon={<FilePen />} />;

label

By default, the label is the translation of the ra.action.edit key, which reads "Edit".

You can customize the label for a specific resource by adding a resources.{resource}.action.edit key to your translation messages. It receives %{name} (singular resource name) and %{recordRepresentation} (string representation of the current record):

const messages = {
  resources: {
    posts: {
      action: {
        edit: "Modify %{recordRepresentation}",
      },
    },
  },
};

You can also pass a custom string or translation key directly via the label prop:

<EditButton label="Modify" />
<EditButton label="resources.posts.action.edit" />

ref

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
 
const ref = useRef<HTMLAnchorElement>(null);
<EditButton ref={ref} />;

scrollToTop

When true (the default), the edit page scrolls to the top after navigation. Set to false to preserve the current scroll position.

<EditButton scrollToTop={false} />