Skip to main content
RefineDocumentation
Version: 5.xx.xx
Source Code

Refresh

<RefreshButton> uses shadcn/ui's <Button> component and the invalidate method from useInvalidate under the hood.

It can be useful when you want to refresh the data without navigating to another page.

Installation​

npx shadcn@latest add https://ui.refine.dev/r/buttons.json

This will add all button components including RefreshButton.

Usage​

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";
import { List } from "@/components/refine-ui/views/list";

const PostList = () => {
  return (
    <List>
      <div className="flex justify-between items-center mb-4">
        <h1>Posts</h1>
        <RefreshButton resource="posts" />
      </div>
      {/* Your list content */}
    </List>
  );
};

Properties​

resource​

resource is used to determine which resource's data will be refreshed. By default, the resource is inferred from the current route.

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return <RefreshButton resource="categories" />;
};

recordItemId​

recordItemId is used to refresh a specific record's data. If not provided, all data for the resource will be refreshed.

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return <RefreshButton resource="posts" recordItemId="123" />;
};

onRefresh​

onRefresh callback allows you to do something after the refresh operation is completed.

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return (
    <RefreshButton
      onRefresh={() => {
        console.log("Data refreshed!");
      }}
    />
  );
};

meta​

It is used to pass additional parameters to the invalidation.

const MyComponent = () => {
  return <RefreshButton meta={{ authorId: "10" }} />;
};

hideText​

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return <RefreshButton hideText={true} />;
};

accessControl​

This prop can be used to skip access control check with its enabled property or to hide the button when the user does not have the permission to access the resource with hideIfUnauthorized property. This is relevant only when an accessControlProvider is provided to <Refine/>.

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return (
    <RefreshButton
      accessControl={{
        enabled: true,
        hideIfUnauthorized: true,
      }}
    />
  );
};

children​

It is used to change the text of the button. By default, the text is "Refresh".

import { RefreshButton } from "@/components/refine-ui/buttons/refresh";

const MyComponent = () => {
  return <RefreshButton>Reload Data</RefreshButton>;
};

API Reference​

Properties​

PropertyTypeDefaultDescription
resourcestringInferred from routeThe resource name or identifier
recordItemIdBaseKey (string or number)-If provided, refreshes data for this specific record
onRefresh() => void-Callback function invoked after refresh operation
metaRecord<string, unknown>-Additional metadata to pass to the invalidation
hideTextbooleanfalseIf true, only the icon will be shown
accessControl{ enabled?: boolean; hideIfUnauthorized?: boolean }{ enabled: true, hideIfUnauthorized: false }Configures access control behavior
childrenReactNodeDefault text & iconCustom content for the button
...restReact.ComponentProps<typeof Button>-Other props are passed to the underlying shadcn/ui Button component (e.g., variant, size, className, onClick)
External Props

It also accepts all props of shadcn/ui Button.

Previous
List
Next
Show