List

<ListButton> is using Mantine <Button> component. It uses the list method from useNavigation under the hood. It can be useful when redirecting the app to the list page route of resource.

Usage

http://localhost:3000/posts/show/123

import { useShow } from "@pankod/refine-core";
import {
    Show,
    Title,
    Text,
    MarkdownField,
    ListButton,
} from "@pankod/refine-mantine";

const PostShow: React.FC<IResourceComponentsProps> = () => {
    const { queryResult } = useShow<IPost>();
    const { data, isLoading } = queryResult;
    const record = data?.data;

    return (
        <Show headerButtons={<ListButton />} isLoading={isLoading}>
            <Title order={5}>Id</Title>
            <Text mt="sm">{record?.id}</Text>

            <Title mt="sm" order={5}>
                Title
            </Title>
            <Text mt="sm">{record?.title}</Text>

            <Title mt="sm" order={5}>
                Content
            </Title>
            <MarkdownField value={record?.content} />
        </Show>
    );
};

note

The button text is defined automatically by refine based on resource object name property.

Properties

resourceNameOrRouteName

Redirection endpoint(resourceNameOrRouteName/list) is defined by resourceNameOrRouteName property. By default, <ListButton> uses name property of the resource object as the endpoint to redirect after clicking.

http://localhost:3000

import { ListButton } from "@pankod/refine-mantine";

const MyListComponent = () => {
    return <ListButton resourceNameOrRouteName="categories" />;
};

Clicking the button will trigger the list method of useNavigation and then redirect to /categories.

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 { ListButton } from "@pankod/refine-mantine";

const MyListComponent = () => {
    return <ListButton hideText />;
};

ignoreAccessControlProvider

It is used to skip access control for the button so that it doesn't check for access control. This is relevant only when an accessControlProvider is provided to <Refine/>

import { ListButton } from "@pankod/refine-mantine";

export const MyListComponent = () => {
    return <ListButton ignoreAccessControlProvider />;
};

API Reference

Properties