CreateButton

CreateButton

The <CreateButton> component is a navigation button that takes users to the create page for a resource. It automatically determines the resource from context or accepts it as a prop.

Usage

Use the button inside a List or any component with ResourceContext:

import { CreateButton, List, ExportButton } from '@/components/admin';

const PostList = () => (
  <List
    actions={
      <>
        <CreateButton />
        <ExportButton />
      </>
    }
  >
    {/* list content */}
  </List>
);

Clicking the button navigates to the create route (e.g., /posts/create).

Installation

Terminal
npx better-admin add create-button

Props

PropRequiredTypeDefaultDescription
labelOptionalstring"Create"Button label text
resourceOptionalstringFrom contextTarget resource for create route
iconOptionalReactNodePlus iconCustom button icon
variantOptionalstring"default"Button variant (default, outline, ghost)

With Specific Resource

Specify a resource explicitly:

<CreateButton resource="posts" label="New Post" />

Custom Label

Customize the button label:

<CreateButton label="Add New" />
<CreateButton label="Create Post" />

Custom Icon

Use a custom icon:

import { PlusCircle } from 'lucide-react';

<CreateButton icon={<PlusCircle />} label="New Item" />

Different Variants

Use different button styles:

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

In Toolbars

CreateButton is commonly used in action toolbars:

import { List, CreateButton, ExportButton, RefreshButton } from '@/components/admin';

const PostList = () => (
  <List
    actions={
      <div className="flex gap-2">
        <RefreshButton />
        <CreateButton />
        <ExportButton />
      </div>
    }
  >
    {/* list content */}
  </List>
);

With better-auth Permissions

Control visibility based on user permissions:

import { CreateButton } from '@/components/admin';
import { useBetterAuth } from 'better-admin';

export function PostListActions() {
  const { user } = useBetterAuth();
  const canCreate = user?.permissions?.includes('posts.create');

  return (
    <>
      {canCreate && <CreateButton />}
      <ExportButton />
    </>
  );
}

Complete Example

import {
  List,
  DataTable,
  CreateButton,
  ExportButton,
  EditButton,
  DeleteButton,
} from '@/components/admin';

export const UserList = () => (
  <List
    title="Users"
    actions={
      <>
        <CreateButton label="New User" />
        <ExportButton />
      </>
    }
  >
    <DataTable>
      <DataTable.Col source="name" />
      <DataTable.Col source="email" />
      <DataTable.Col source="role" />
      <DataTable.Col label="Actions">
        <div className="flex gap-2">
          <EditButton />
          <DeleteButton />
        </div>
      </DataTable.Col>
    </DataTable>
  </List>
);

Next Steps

Edit on GitHub

On this page