EditButton

EditButton

The <EditButton> component is a link button that navigates to the edit page of the current record. It must be used inside a RecordContext.

Usage

Use it in a DataTable row or in a Show page:

import { DataTable, EditButton } from '@/components/admin';

const PostList = () => (
  <DataTable>
    <DataTable.Col source="title" />
    <DataTable.Col source="author" />
    <DataTable.Col source="published_at" />
    <DataTable.Col label="Actions">
      <EditButton />
    </DataTable.Col>
  </DataTable>
);

On click, the button navigates to the edit route (e.g., /posts/123/edit).

Installation

Terminal
npx better-admin add edit-button

Props

PropRequiredTypeDefaultDescription
labelOptionalstring"Edit"Button label text
recordOptionalobjectFrom contextRecord object with id
resourceOptionalstringFrom contextResource name
iconOptionalReactNodeEdit iconCustom button icon
variantOptionalstring"ghost"Button variant

Row Click Alternative

In a DataTable, you can make entire rows clickable instead of using a button:

<DataTable rowClick="edit">
  <DataTable.Col source="title" />
  <DataTable.Col source="author" />
  <DataTable.Col source="published_at" />
</DataTable>

Custom Label

Customize the button label:

<EditButton label="Modify" />
<EditButton label="Update" />

Custom Icon

Use a custom icon:

import { Pencil } from 'lucide-react';

<EditButton icon={<Pencil />} />

Different Variants

<EditButton variant="default" />
<EditButton variant="outline" />
<EditButton variant="ghost" />

In Show Pages

Use EditButton in show page actions:

import { Show, EditButton, DeleteButton } from '@/components/admin';

export const PostShow = () => (
  <Show
    actions={
      <>
        <EditButton />
        <DeleteButton />
      </>
    }
  >
    {/* show content */}
  </Show>
);

With better-auth Permissions

Control visibility based on user permissions:

import { EditButton } from '@/components/admin';
import { useBetterAuth } from 'better-admin';
import { useRecordContext } from '@/lib/hooks';

export function PostEditButton() {
  const { user } = useBetterAuth();
  const record = useRecordContext();
  
  // Only show edit button for own posts or admins
  const canEdit = user?.id === record?.author_id || user?.role === 'admin';

  if (!canEdit) return null;
  
  return <EditButton />;
}

With better-query

EditButton works seamlessly with better-query data:

import { List, DataTable, EditButton, DeleteButton } from '@/components/admin';
import { useQuery } from 'better-admin';
import { query } from '@/lib/query';

export function PostList() {
  const { data } = useQuery("post", query);

  return (
    <List>
      <DataTable data={data}>
        <DataTable.Col source="title" />
        <DataTable.Col source="status" />
        <DataTable.Col label="Actions">
          <div className="flex gap-2">
            <EditButton />
            <DeleteButton />
          </div>
        </DataTable.Col>
      </DataTable>
    </List>
  );
}

Complete Example

import {
  DataTable,
  EditButton,
  DeleteButton,
  ShowButton,
  TextField,
  DateField,
  ReferenceField,
} from '@/components/admin';

export const OrderList = () => (
  <DataTable>
    <DataTable.Col source="id" />
    <DataTable.Col source="order_number">
      <TextField />
    </DataTable.Col>
    <DataTable.Col label="Customer">
      <ReferenceField source="customer_id" reference="customers">
        <TextField source="name" />
      </ReferenceField>
    </DataTable.Col>
    <DataTable.Col source="created_at">
      <DateField />
    </DataTable.Col>
    <DataTable.Col source="status" />
    <DataTable.Col label="Actions">
      <div className="flex gap-2">
        <ShowButton variant="ghost" />
        <EditButton />
        <DeleteButton variant="destructive" />
      </div>
    </DataTable.Col>
  </DataTable>
);

Conditional Rendering

Show EditButton conditionally based on record data:

import { EditButton } from '@/components/admin';
import { useRecordContext } from '@/lib/hooks';

export function ConditionalEditButton() {
  const record = useRecordContext();
  
  // Only show edit for draft posts
  if (record?.status !== 'draft') return null;
  
  return <EditButton />;
}

Next Steps

Edit on GitHub

On this page