Cancel Button

Cancel Button is a reusable cancel-action button built on MUI's Button. It shows an undo icon by default and uses a secondary, contained style so it reads clearly as a cancel or revert action next to primary actions like Save or Submit.

Use it for dialogs, forms, or wizards when the user can abandon or undo an action. The button accepts standard MUI button props such as variant, color, and sx, and supports custom startIcon and children for flexible labeling.

Import

import { CancelButton } from '@js-smart/react-kit';

Basic usage

<CancelButton name="Cancel" onClick={() => handleCancel()} />

With children

You can pass custom content instead of (or along with) name:

<CancelButton onClick={() => handleCancel()}>Discard changes</CancelButton>

Variant and color

Override the default contained variant and secondary color:

<CancelButton
  name="Cancel"
  variant="outlined"
  color="primary"
  onClick={() => handleCancel()}
/>

Custom start icon

Replace the default undo icon:

<CancelButton
  name="Close"
  startIcon={<CloseIcon />}
  onClick={() => handleClose()}
/>

In forms

Use type="submit" or type="reset" when the button lives inside a form:

<CancelButton name="Cancel" type="button" onClick={() => history.back()} />

Accessibility

The button uses aria-label from the ariaLabel prop, or falls back to name or "Cancel". Set ariaLabel when the visible label is not descriptive enough for screen readers.

Peer dependencies

CancelButton uses MUI's Button and Undo icon. Ensure your project has @mui/material and @mui/icons-material installed (see Installation).

Props

Prop	Type	Default	Description
onClick	() => void	—	Required. Called when the button is clicked.
children	ReactNode	—	Button content. If omitted, name is used.
name	string	—	Button label (used when children is not provided).
className	string	—	CSS class name.
dataCy	string	'cancel-button'	data-cy value for testing (e.g. Cypress).
sx	SxProps<Theme>	—	MUI sx prop for styling.
type	'button' | 'submit' | 'reset'	'button'	Native button type.
variant	'text' | 'outlined' | 'contained'	'contained'	MUI button variant.
color	'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'	'secondary'	MUI button color.
startIcon	ReactNode	<UndoIcon />	Icon shown before the label.
ariaLabel	string	name or 'Cancel'	Accessible label for the button.