ShowButton

Link button to the show page of the current record.

Usage

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

import { ShowButton, DeleteButton, Edit } from "@/components/admin";
 
const PostEdit = () => (
  <Edit
    actions={
      <>
        <ShowButton />
        <DleteButton />
      </>
    }
  >
    ...
  </Edit>
);

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

Props

Additional props are passed to the underlying <a> element (e.g., className, target, rel).

icon

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

import { ScanEye } from "lucide-react";
 
<ShowButton icon={<ScanEye />} />;

label

By default, the label is the translation of the ra.action.show key, which reads "Show".

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

const messages = {
  resources: {
    posts: {
      action: {
        show: "View %{recordRepresentation}",
      },
    },
  },
};

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

<ShowButton label="View details" />
<ShowButton label="resources.posts.action.show" />

ref

Forwards a ref to the underlying <Button> element.

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

scrollToTop

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

<ShowButton scrollToTop={false} />