CreateButton

Navigates to the create page for the curren resource.

Usage

Use the button without form when in a ResourceContext (e.g., inside a <List>):

import { CreateButton, List, ExportButton } from "@/components/admin";
 
const PostList = () => (
  <List
    actions={
      <>
        <CreateButton />
        <ExportButton />
      </>
    }
  >
    ...
  </List>
);

Clicking on the button navigates to the create route of the current resource (e.g., /posts/create).

Props

icon

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

import { PlusCircle } from "lucide-react";
 
<CreateButton icon={<PlusCircle />} />;

label

By default, the label is the translation of the ra.action.create key, which reads "Create".

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

const messages = {
  resources: {
    posts: {
      action: {
        create: "New %{name}",
      },
    },
  },
};

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

<CreateButton label="New article" />
<CreateButton label="resources.articles.action.create" />

ref

Forwards a ref to the underlying <Button> element.

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

scrollToTop

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

<CreateButton scrollToTop={false} />