Skip to main content
Version: 4.xx.xxSwizzle Ready

Import

<ImportButton> is compatible with the useImport hook and is meant to be used as it's upload button. It uses Material UI <LoadingButton> component and native html <input> element. It wraps a <label> with a <LoadingButton> component and <input> element and accepts it's own properties for separately.

Refer to the for more detailed information about useImport. β†’

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage​

Use it like any other Material UI <LoadingButton>. You can use it with useImport:

http://localhost:3000/posts
import { useImport } from "@refinedev/core";
import {
useDataGrid,
List,
ImportButton,
} from "@refinedev/mui";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 400, flex: 1 },
];

const PostsList: React.FC = () => {
const { dataGridProps } = useDataGrid<IPost>();

const { inputProps, isLoading } = useImport<IPost>();

return (
<List
headerButtons={
<ImportButton inputProps={inputProps} loading={isLoading} />
}
>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};

interface IPost {
id: number;
title: string;
}

Properties​

hideText​

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

http://localhost:3000
import { ImportButton } from "@refinedev/mui";

const MyImportComponent = () => {
return (
<ImportButton
hideText={true}
/>
);
};

API Reference​

Properties​

External Props

It also accepts all props of Material UI LoadingButton.