diff --git a/apps/docs/components/ExampleConfirmButton.tsx b/apps/docs/components/ExampleConfirmButton.tsx
index 6601676c..77df1b97 100644
--- a/apps/docs/components/ExampleConfirmButton.tsx
+++ b/apps/docs/components/ExampleConfirmButton.tsx
@@ -4,11 +4,12 @@ export function ExampleConfirmButton() {
return (
// @highlight-start
{ }}>
+ onConfirm={() => { }}
+ header={'Potvrdite brisanje'}
+ message='Jeste li sigurni da želite obrisati ovaj zapis?'
+ >
Obriši
// @highlight-end
diff --git a/apps/docs/components/ExampleConfirmButtonIcon.tsx b/apps/docs/components/ExampleConfirmButtonIcon.tsx
new file mode 100644
index 00000000..1e1eab93
--- /dev/null
+++ b/apps/docs/components/ExampleConfirmButtonIcon.tsx
@@ -0,0 +1,19 @@
+import { ConfirmButton } from '@enterwell/react-ui';
+import { Delete } from '@mui/icons-material';
+
+export function ExampleConfirmButtonIcon() {
+ return (
+ // @highlight-start
+ { }}
+ header={'Potvrdite brisanje'}
+ message='Jeste li sigurni da želite obrisati ovaj zapis?'
+ >
+
+
+ // @highlight-end
+ )
+}
\ No newline at end of file
diff --git a/apps/docs/pages/react-ui/components/confirm-button.mdx b/apps/docs/pages/react-ui/components/confirm-button.mdx
index 4a216a8d..f97befae 100644
--- a/apps/docs/pages/react-ui/components/confirm-button.mdx
+++ b/apps/docs/pages/react-ui/components/confirm-button.mdx
@@ -5,6 +5,7 @@ title: ConfirmButton
import { ConfirmButton } from '@enterwell/react-ui';
import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
import { ExampleConfirmButton } from '../../../components/ExampleConfirmButton.tsx';
+import { ExampleConfirmButtonIcon } from '../../../components/ExampleConfirmButtonIcon.tsx';
import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
# ConfirmButton
@@ -21,6 +22,10 @@ import { ComponentDescription, ComponentParameters, ComponentSource } from '../.
+## As icon button
+
+
+
## Inspect
diff --git a/packages/react-ui/ConfirmButton/ConfirmButton.tsx b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
index 482ad452..e48b37fd 100644
--- a/packages/react-ui/ConfirmButton/ConfirmButton.tsx
+++ b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
@@ -1,6 +1,6 @@
import { ConfirmDialog, type ConfirmDialogProps } from '../ConfirmDialog';
import { useState } from 'react';
-import { Button, type ButtonProps } from '@mui/material';
+import { Button, IconButton, type ButtonProps } from '@mui/material';
/**
* The keys of the {@link ConfirmDialog} props that are destructured from shared props.
@@ -16,6 +16,10 @@ export type ConfirmButtonProps =
Omit &
Pick &
{
+ /**
+ * @defaultValue `false`
+ */
+ iconButton?: boolean;
onConfirm?: () => void;
slots?: {
// Omit already used props and shared props, re-add color so we can
@@ -31,7 +35,14 @@ export type ConfirmButtonProps =
* @public
*/
export function ConfirmButton({
- header, message, confirmButtonText, color, onConfirm, slots, ...rest
+ header,
+ message,
+ confirmButtonText,
+ color,
+ iconButton = false,
+ onConfirm,
+ slots,
+ ...rest
}: ConfirmButtonProps) {
const [open, setOpen] = useState(false);
@@ -42,7 +53,19 @@ export function ConfirmButton({
return (
<>
-