diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx index 9d46a185f8..3e86c04085 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx @@ -13,13 +13,17 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => { const { onClick, isDisabled } = props; const { t } = useTranslation(); const isConnected = useAppSelector((s) => s.system.isConnected); + const imageSelectionLength: number = (useAppSelector((s) => s.gallery.selection) || []).length; + const labelMessage: string = imageSelectionLength > 1 ? + t('gallery.deleteImage_plural', { 'count': imageSelectionLength }) : + t('gallery.deleteImage'); return ( } - tooltip={`${t('gallery.deleteImage')} (Del)`} - aria-label={`${t('gallery.deleteImage')} (Del)`} + tooltip={labelMessage} + aria-label={labelMessage} isDisabled={isDisabled || !isConnected} colorScheme="error" />