diff --git a/docs/List.md b/docs/List.md index 85286553f4e..57d8b234d3d 100644 --- a/docs/List.md +++ b/docs/List.md @@ -364,7 +364,7 @@ export default ResetViewsButton; **Tip**: `` text props such as `title` and `content` are translatable. You can pass use translation keys in these props. -**Tip**: You can customize the text of the two `` component buttons using the `cancel` and `confirm` prop which accepts translation keys too. +**Tip**: You can customize the text of the two `` component buttons using the `cancel` and `confirm` props which accept translation keys. You can customize the icons by setting the `ConfirmIcon` and `CancelIcon` props, which accept a SvgIcon type. **Tip**: React-admin doesn't use the `` component internally, because deletes and updates are applied locally immediately, then dispatched to the server after a few seconds, unless the user chooses to undo the modification. That's what we call optimistic rendering. You can do the same for the `ResetViewsButton` by setting `undoable: true` in the last argument of `useUpdateMany()`, as follows: diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js index bf51a6e4264..6ba5ec46759 100644 --- a/packages/ra-ui-materialui/src/layout/Confirm.js +++ b/packages/ra-ui-materialui/src/layout/Confirm.js @@ -45,6 +45,8 @@ const useStyles = makeStyles(theme => ({ * content="Are you sure you want to delete this item?" * confirm="Yes" * confirmColor="primary" + * ConfirmIcon=ActionCheck + * CancelIcon=AlertError * cancel="Cancel" * onConfirm={() => { // do something }} * onClose={() => { // do something }} @@ -58,6 +60,8 @@ const Confirm = ({ confirm, cancel, confirmColor, + ConfirmIcon, + CancelIcon, onClose, onConfirm, classes: classesOverride, @@ -98,7 +102,7 @@ const Confirm = ({ @@ -123,6 +127,8 @@ Confirm.propTypes = { classes: PropTypes.object, confirm: PropTypes.string.isRequired, confirmColor: PropTypes.string.isRequired, + ConfirmIcon: PropTypes.elementType.isRequired, + CancelIcon: PropTypes.elementType.isRequired, content: PropTypes.string.isRequired, isOpen: PropTypes.bool, loading: PropTypes.bool, @@ -136,6 +142,8 @@ Confirm.defaultProps = { classes: {}, confirm: 'ra.action.confirm', confirmColor: 'primary', + ConfirmIcon: ActionCheck, + CancelIcon: AlertError, isOpen: false, };