feat(react-ui/confirm-button): iconButton optional prop

apps/docs/components/ExampleConfirmButton.tsx

@@ -4,11 +4,12 @@ export function ExampleConfirmButton() {
     return (
         // @highlight-start
         <ConfirmButton
-            header={'Potvrdite brisanje'}
-            message='Jeste li sigurni da želite obrisati ovaj zapis?'
             color="error"
             variant='contained'
-            onConfirm={() => { }}>
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
             Obriši
         </ConfirmButton>
         // @highlight-end

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
+        <ConfirmButton
+            iconButton
+            color="error"
+            variant='contained'
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
+            <Delete />
+        </ConfirmButton>
+        // @highlight-end
+    )
+}

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 '../.
 
 <ComponentWithSource component={ ExampleConfirmButton } centered />
 
+## As icon button
+
+<ComponentWithSource component={ ExampleConfirmButtonIcon } centered />
+
 ## Inspect
 
 <details>

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<ButtonProps, "onClick"> &
   Pick<ConfirmDialogProps, DialogDestructuredPropKeys> &
   {
+    /**
+     * @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 (
     <>
-      <Button color={color} {...rest} onClick={() => setOpen(true)} />
+      {iconButton ? (
+        <IconButton
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      ) : (
+        <Button
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      )}
       <ConfirmDialog
         isOpen={open}
         onConfirm={handleConfirm}

packages/react-ui/temp/react-ui.api.md

@@ -27,10 +27,11 @@ import { TextFieldProps } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 
 // @public
-export function ConfirmButton({ header, message, confirmButtonText, color, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
+export function ConfirmButton({ header, message, confirmButtonText, color, iconButton, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
 
 // @public
 export type ConfirmButtonProps = Omit<ButtonProps, "onClick"> & Pick<ConfirmDialogProps, DialogDestructuredPropKeys> & {
+    iconButton?: boolean;
     onConfirm?: () => void;
     slots?: {
         dialog?: Omit<ConfirmDialogProps, "isOpen" | "onCancel" | DialogDestructuredPropKeys> & {