UpdateButton

Updates the current record with a fixed data payload, without showing a form. Useful for buttons like "Reset views" or "Mark as published".

Installation

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

Usage

Place the button inside a RecordContext, typically in the actions of an <Edit> or <Show> view, or in a DataTable row:

import { Edit, UpdateButton } from "@/components/admin";
 
const PostEditActions = () => (
  <>
    <UpdateButton label="Reset Views" data={{ views: 0 }} />
  </>
);
 
const PostEdit = () => <Edit actions={<PostEditActions />}>...</Edit>;

Defaults to mutationMode="undoable" — the update fires immediately and a notification with an undo button is shown for a few seconds. Pass mutationMode="pessimistic" (or use <UpdateWithConfirmButton>) to ask the user to confirm before firing the mutation.

Named exports

Export	Behavior
`UpdateButton`	Dispatches to one of the variants below based on `mutationMode` (default: `undoable`)
`UpdateWithUndoButton`	Fires immediately, shows undo notification
`UpdateWithConfirmButton`	Opens a confirmation dialog, fires on confirm

Props

Prop	Required	Type	Default	Description
`data`	Required	`object`	-	Object passed to `dataProvider.update()`
`className`	Optional	`string`	-	Additional classes
`confirmContent`	Optional	`ReactNode`	i18n computed	Body of the confirmation dialog (Confirm variant)
`confirmTitle`	Optional	`ReactNode`	i18n computed	Title of the confirmation dialog (Confirm variant)
`icon`	Optional	`ReactNode`	RefreshCw icon	Custom icon
`label`	Optional	`string`	`ra.action.update`	i18n key / label
`mutationMode`	Optional	`"undoable" \| "optimistic" \| "pessimistic"`	`undoable`	When to apply the mutation
`mutationOptions`	Optional	`UseUpdateOptions`	-	Forwarded to `useUpdate`
`onClick`	Optional	`(e: MouseEvent<HTMLButtonElement>) => void`	-	Additional click handler
`redirect`	Optional	`RedirectionSideEffect`	-	Where to redirect after update
`ref`	Optional	`Ref<HTMLButtonElement>`	-	Forwarded to the underlying `<Button>`
`resource`	Optional	`string`	From context	Resource name
`successMessage`	Optional	`string`	-	Custom success i18n key
`variant`	Optional	shadcn button variant	`outline`	Button style

`icon`

Replaces the default <RefreshCw /> shown alongside the label. Pass any lucide-react icon to convey a different action.

`ref`

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
import { UpdateButton } from "@/components/admin";
 
const ResetViewsButton = () => {
  const ref = useRef<HTMLButtonElement>(null);
  return <UpdateButton label="Reset Views" data={{ views: 0 }} ref={ref} />;
};

import { RotateCcw } from "lucide-react";
import { UpdateButton } from "@/components/admin";
 
<UpdateButton label="Reset Views" data={{ views: 0 }} icon={<RotateCcw />} />;

`mutationMode`

{
  /* Default: optimistic update with undo notification */
}
<UpdateButton label="Reset Views" data={{ views: 0 }} />;
 
{
  /* Equivalent */
}
<UpdateWithUndoButton label="Reset Views" data={{ views: 0 }} />;
 
{
  /* Pessimistic with confirmation dialog */
}
<UpdateButton
  label="Reset Views"
  data={{ views: 0 }}
  mutationMode="pessimistic"
/>;
 
{
  /* Equivalent */
}
<UpdateWithConfirmButton label="Reset Views" data={{ views: 0 }} />;

`label`

By default, the label is computed from the ra.action.update translation key, which reads "Update". You can customize the label for a specific resource by adding a resources.{resource}.action.update key to your translation messages:

const messages = {
  resources: {
    posts: {
      action: {
        update: "Update %{recordRepresentation}",
      },
    },
  },
};

Or pass a custom string directly:

<UpdateButton label="Reset Views" data={{ views: 0 }} />