Button Components

Refine provides button components that handle common actions like navigation, data mutations, and exports. These buttons work consistently across all UI frameworks and include built-in features like loading states, confirmations, and access control.

CreateButton

Navigate to the create page for a resource.

Basic Usage

Ant Design
Material UI
Mantine
Chakra UI

import { CreateButton } from "@refinedev/antd";

function ProductList() {
  return <CreateButton />;
}

import { CreateButton } from "@refinedev/mui";

function ProductList() {
  return <CreateButton />;
}

import { CreateButton } from "@refinedev/mantine";

function ProductList() {
  return <CreateButton />;
}

import { CreateButton } from "@refinedev/chakra-ui";

function ProductList() {
  return <CreateButton />;
}

Props

Prop	Type	Description
`resource`	`string`	Resource name (auto-detected from route)
`meta`	`object`	Meta data for navigation
`hideText`	`boolean`	Hide button text, show icon only
`accessControl`	`object`	Access control configuration
`onClick`	`function`	Custom click handler

Examples

import { CreateButton } from "@refinedev/antd";

// Default - detects resource from route
<CreateButton />

// Specific resource
<CreateButton resource="products" />

// Icon only
<CreateButton hideText />

// Custom handler
<CreateButton onClick={(e) => {
  e.preventDefault();
  // Custom logic
}} />

// With access control
<CreateButton
  accessControl={{
    enabled: true,
    hideIfUnauthorized: true,
  }}
/>

EditButton

Navigate to the edit page for a record.

Basic Usage

import { EditButton } from "@refinedev/antd";

function ProductList() {
  return <EditButton recordItemId="1" />;
}

Props

Prop	Type	Description
`recordItemId`	`string \| number`	Record ID to edit
`resource`	`string`	Resource name
`meta`	`object`	Meta data for navigation
`hideText`	`boolean`	Hide button text
`accessControl`	`object`	Access control configuration

Examples

// In a table
<Table.Column
  title="Actions"
  render={(_, record) => <EditButton recordItemId={record.id} />}
/>

// Icon only
<EditButton recordItemId="1" hideText size="small" />

// Different resource
<EditButton resource="products" recordItemId="1" />

ShowButton

Navigate to the show page for a record.

Basic Usage

import { ShowButton } from "@refinedev/antd";

function ProductList() {
  return <ShowButton recordItemId="1" />;
}

Props

Same as EditButton.

Examples

// In a table
<Table.Column
  title="Actions"
  render={(_, record) => (
    <Space>
      <ShowButton recordItemId={record.id} hideText />
      <EditButton recordItemId={record.id} hideText />
    </Space>
  )}
/>

DeleteButton

Delete a record with confirmation dialog.

Basic Usage

import { DeleteButton } from "@refinedev/antd";

function ProductList() {
  return <DeleteButton recordItemId="1" />;
}

Props

Prop	Type	Description
`recordItemId`	`string \| number`	Record ID to delete
`resource`	`string`	Resource name
`meta`	`object`	Meta data for mutation
`hideText`	`boolean`	Hide button text
`confirmTitle`	`string`	Confirmation dialog title
`confirmOkText`	`string`	Confirmation OK button text
`confirmCancelText`	`string`	Confirmation cancel button text
`onSuccess`	`function`	Success callback
`accessControl`	`object`	Access control configuration

Examples

import { DeleteButton } from "@refinedev/antd";

// Default with confirmation
<DeleteButton recordItemId="1" />

// Custom confirmation text
<DeleteButton
  recordItemId="1"
  confirmTitle="Delete this product?"
  confirmOkText="Yes, delete"
  confirmCancelText="No, keep it"
/>

// With success callback
<DeleteButton
  recordItemId="1"
  onSuccess={() => {
    notification.success({
      message: "Product deleted successfully",
    });
  }}
/>

// Danger variant
<DeleteButton recordItemId="1" danger />

ListButton

Navigate to the list page for a resource.

Basic Usage

import { ListButton } from "@refinedev/antd";

function ProductEdit() {
  return <ListButton />;
}

Props

Prop	Type	Description
`resource`	`string`	Resource name
`meta`	`object`	Meta data for navigation
`hideText`	`boolean`	Hide button text

Examples

// Back to list from edit/show page
<ListButton />

// Specific resource
<ListButton resource="products" />

// Icon only
<ListButton hideText />

RefreshButton

Refresh the current page data.

Basic Usage

import { RefreshButton } from "@refinedev/antd";

function ProductShow() {
  return <RefreshButton />;
}

Props

Prop	Type	Description
`resource`	`string`	Resource name
`recordItemId`	`string \| number`	Record ID
`hideText`	`boolean`	Hide button text
`onClick`	`function`	Custom click handler

Examples

// Auto-refresh current page
<RefreshButton />

// Custom resource
<RefreshButton resource="products" recordItemId="1" />

// Icon only
<RefreshButton hideText />

SaveButton

Submit a form.

Basic Usage

import { SaveButton } from "@refinedev/antd";

function ProductForm() {
  return <SaveButton />;
}

Props

Prop	Type	Description
`hideText`	`boolean`	Hide button text
`loading`	`boolean`	Loading state
`disabled`	`boolean`	Disabled state
`onClick`	`function`	Custom click handler

Examples

import { Create, useForm, SaveButton } from "@refinedev/antd";
import { Form, Input } from "antd";

export const ProductCreate = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create
      saveButtonProps={saveButtonProps}
      footerButtons={({ defaultButtons }) => (
        <>
          <SaveButton {...saveButtonProps} />
          <Button>Save as Draft</Button>
        </>
      )}
    >
      <Form {...formProps}>
        <Form.Item name="name">
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

CloneButton

Clone a record by navigating to create page with pre-filled data.

Basic Usage

import { CloneButton } from "@refinedev/antd";

function ProductShow() {
  return <CloneButton recordItemId="1" />;
}

Props

Prop	Type	Description
`recordItemId`	`string \| number`	Record ID to clone
`resource`	`string`	Resource name
`meta`	`object`	Meta data for navigation
`hideText`	`boolean`	Hide button text

Examples

// Clone current record
<CloneButton recordItemId="1" />

// In show page header
<Show
  headerButtons={({ defaultButtons }) => (
    <>
      {defaultButtons}
      <CloneButton />
    </>
  )}
>
  {/* Content */}
</Show>

ExportButton

Export table data to CSV or Excel.

Basic Usage

import { ExportButton, useTable } from "@refinedev/antd";

export const ProductList = () => {
  const { tableProps, tableQueryResult } = useTable();

  return (
    <List headerButtons={<ExportButton />}>
      <Table {...tableProps} />
    </List>
  );
};

Props

Prop	Type	Description
`hideText`	`boolean`	Hide button text
`loading`	`boolean`	Loading state
`onClick`	`function`	Custom export handler

Custom Export

import { ExportButton } from "@refinedev/antd";
import { useExport } from "@refinedev/core";

function ProductList() {
  const { triggerExport, isLoading } = useExport({
    resource: "products",
    mapData: (item) => ({
      id: item.id,
      name: item.name,
      price: `$${item.price}`,
    }),
  });

  return (
    <ExportButton
      onClick={triggerExport}
      loading={isLoading}
    />
  );
}

ImportButton

Trigger import functionality for bulk data upload.

Basic Usage

import { ImportButton } from "@refinedev/antd";

function ProductList() {
  return <ImportButton />;
}

Props

Prop	Type	Description
`hideText`	`boolean`	Hide button text
`loading`	`boolean`	Loading state
`onClick`	`function`	Custom import handler

Button Groups

Combine multiple buttons together:

Ant Design
Material UI
Mantine
Chakra UI

import { Space } from "antd";
import { EditButton, ShowButton, DeleteButton } from "@refinedev/antd";

function ActionButtons({ record }) {
  return (
    <Space>
      <ShowButton recordItemId={record.id} hideText size="small" />
      <EditButton recordItemId={record.id} hideText size="small" />
      <DeleteButton recordItemId={record.id} hideText size="small" />
    </Space>
  );
}

import { Stack } from "@mui/material";
import { EditButton, ShowButton, DeleteButton } from "@refinedev/mui";

function ActionButtons({ record }) {
  return (
    <Stack direction="row" spacing={1}>
      <ShowButton recordItemId={record.id} hideText size="small" />
      <EditButton recordItemId={record.id} hideText size="small" />
      <DeleteButton recordItemId={record.id} hideText size="small" />
    </Stack>
  );
}

import { Group } from "@mantine/core";
import { EditButton, ShowButton, DeleteButton } from "@refinedev/mantine";

function ActionButtons({ record }) {
  return (
    <Group spacing="xs">
      <ShowButton recordItemId={record.id} hideText size="sm" />
      <EditButton recordItemId={record.id} hideText size="sm" />
      <DeleteButton recordItemId={record.id} hideText size="sm" />
    </Group>
  );
}

import { HStack } from "@chakra-ui/react";
import { EditButton, ShowButton, DeleteButton } from "@refinedev/chakra-ui";

function ActionButtons({ record }) {
  return (
    <HStack spacing={2}>
      <ShowButton recordItemId={record.id} hideText size="sm" />
      <EditButton recordItemId={record.id} hideText size="sm" />
      <DeleteButton recordItemId={record.id} hideText size="sm" />
    </HStack>
  );
}

Access Control

Buttons automatically respect access control rules:

import { Refine } from "@refinedev/core";
import { CreateButton, EditButton, DeleteButton } from "@refinedev/antd";

const accessControlProvider = {
  can: async ({ resource, action }) => {
    // Your access control logic
    if (resource === "products" && action === "delete") {
      return { can: false };
    }
    return { can: true };
  },
};

function App() {
  return (
    <Refine
      accessControlProvider={accessControlProvider}
      // ... other props
    >
      {/* DeleteButton will be hidden for products */}
      <DeleteButton resource="products" recordItemId="1" />
    </Refine>
  );
}

Custom Buttons

Create custom action buttons using Refine hooks:

import { useNavigation, useDelete } from "@refinedev/core";
import { Button } from "antd";

function CustomButton({ recordItemId }) {
  const { show } = useNavigation();
  const { mutate, isLoading } = useDelete();

  const handleArchive = () => {
    mutate({
      resource: "products",
      id: recordItemId,
      meta: {
        action: "archive", // Custom action
      },
    });
  };

  return (
    <Button onClick={handleArchive} loading={isLoading}>
      Archive
    </Button>
  );
}

Best Practices

Icon Only Buttons: Use hideText for compact layouts like tables
Loading States: Buttons show loading automatically during mutations
Confirmations: Use confirmation dialogs for destructive actions
Access Control: Rely on built-in access control integration
Consistent Placement: Place action buttons in consistent locations
Mobile Friendly: Test button groups on mobile devices

Common Patterns

import { List, CreateButton, ExportButton, ImportButton } from "@refinedev/antd";
import { Space } from "antd";

export const ProductList = () => {
  return (
    <List
      headerButtons={({ defaultButtons }) => (
        <Space>
          <ImportButton />
          <ExportButton />
          {defaultButtons}
        </Space>
      )}
    >
      {/* Table */}
    </List>
  );
};

import { Show, EditButton, DeleteButton, RefreshButton, ListButton } from "@refinedev/antd";
import { Space } from "antd";

export const ProductShow = () => {
  return (
    <Show
      headerButtons={({ defaultButtons, editButtonProps, deleteButtonProps }) => (
        <Space>
          <ListButton />
          <EditButton {...editButtonProps} />
          <DeleteButton {...deleteButtonProps} />
          <RefreshButton />
        </Space>
      )}
    >
      {/* Content */}
    </Show>
  );
};

import { Edit, DeleteButton, RefreshButton, ListButton } from "@refinedev/antd";
import { Space } from "antd";

export const ProductEdit = () => {
  return (
    <Edit
      headerButtons={({ defaultButtons }) => (
        <Space>
          <ListButton />
          <RefreshButton />
          {defaultButtons}
          <DeleteButton />
        </Space>
      )}
    >
      {/* Form */}
    </Edit>
  );
};

Table Action Column

import { List, useTable, EditButton, ShowButton, DeleteButton } from "@refinedev/antd";
import { Table, Space } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column
          title="Actions"
          fixed="right"
          render={(_, record) => (
            <Space size="small">
              <ShowButton recordItemId={record.id} hideText size="small" />
              <EditButton recordItemId={record.id} hideText size="small" />
              <DeleteButton recordItemId={record.id} hideText size="small" />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

Next Steps

CRUD Components

Build data interfaces

Field Components

Display data fields

Navigation

Learn about navigation hooks

Access Control

Implement access control

Overview

Supported UI Frameworks

Components

​CreateButton

​Basic Usage

​Props

​Examples

​EditButton

​Basic Usage

​Props

​Examples

​ShowButton

​Basic Usage

​Props

​Examples

​DeleteButton

​Basic Usage

​Props

​Examples

​ListButton

​Basic Usage

​Props

​Examples

​RefreshButton

​Basic Usage

​Props

​Examples

​SaveButton

​Basic Usage

​Props

​Examples

​CloneButton

​Basic Usage

​Props

​Examples

​ExportButton

​Basic Usage

​Props

​Custom Export

​ImportButton

​Basic Usage

​Props

​Button Groups

​Access Control

​Custom Buttons

​Best Practices

​Common Patterns

​List Page Header

​Show Page Header

​Edit Page Header

​Table Action Column

​Next Steps

CRUD Components

Field Components

Navigation

Access Control

Build docs developers (and LLMs) love

CreateButton

Basic Usage

Props

Examples

EditButton

Basic Usage

Props

Examples

ShowButton

Basic Usage

Props

Examples

DeleteButton

Basic Usage

Props

Examples

ListButton

Basic Usage

Props

Examples

RefreshButton

Basic Usage

Props

Examples

SaveButton

Basic Usage

Props

Examples

CloneButton

Basic Usage

Props

Examples

ExportButton

Basic Usage

Props

Custom Export

ImportButton

Basic Usage

Props

Button Groups

Access Control

Custom Buttons

Best Practices

Common Patterns

List Page Header

Show Page Header

Edit Page Header

Table Action Column

Next Steps