CloneButton

Link button that opens the create form pre-filled with the current record's data.

Usage

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

import { CloneButton, Show } from "@/components/admin";
 
const PostShow = () => <Show actions={<CloneButton />}>...</Show>;

On click, the button navigates to the create route of the current resource (e.g., /posts/create) and passes the record's data (without id) as a search param so the form can be pre-filled.

Props

icon

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

import { CopyPlus } from "lucide-react";
 
<CloneButton icon={<CopyPlus />} />;

label

By default, the label is the translation of the ra.action.clone key, which reads "Clone".

You can customize the label for a specific resource by adding a resources.{resource}.action.clone key to your translation messages. It receives %{name} (singular resource name):

const messages = {
  resources: {
    posts: {
      action: {
        clone: "Duplicate %{name}",
      },
    },
  },
};

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

<CloneButton label="Duplicate" />
<CloneButton label="resources.posts.action.clone" />

ref

Forwards a ref to the underlying <Button> element.

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

scrollToTop

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

<CloneButton scrollToTop={false} />