CancelButton

Button to cancel the edition of the current content without saving.

Installation

pnpm dlx shadcn@latest add @shadmin/cancel-button

Usage

The default Form toolbar of <SimpleForm> includes a <CancelButton> next to the <SaveButton>.

You can customize the toolbar by providing your own component to the toolbar prop of <SimpleForm>, and include a <CancelButton> in it:

import { CancelButton, SaveButton, SimpleForm } from "@/components/admin";
 
const FormToolbar = () => (
  <div className="flex flex-row gap-2 justify-end">
    <CancelButton />
    <SaveButton />
  </div>
);
 
const PostEdit = () => (
  <Edit>
    <SimpleForm toolbar={<FormToolbar />}>...</SimpleForm>
  </Edit>
);

On click, the button navigates back to the previous location (usually the list view), without saving changes.

Props

PropRequiredTypeDefaultDescription
labelOptionalstringra.action.canceli18n key
refOptionalRef<HTMLButtonElement>-Forwarded to the underlying <Button>

ref

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
import { CancelButton } from "@/components/admin";
 
const MyToolbar = () => {
  const ref = useRef<HTMLButtonElement>(null);
  return <CancelButton ref={ref} />;
};