Add CircularIconButton Component

2025-10-25 08:52:11 +02:00 · 2025-10-25 08:52:11 +02:00 · 7ffda11a34
commit 7ffda11a34
parent 1c00abe12e
2 changed files with 45 additions and 13 deletions
--- a/frontend/src/components/basics/CircularIconButton.tsx
+++ b/frontend/src/components/basics/CircularIconButton.tsx
@ -0,0 +1,37 @@
+import {defaultIconSize} from "./SvgIcon";
+import type {LucideIcon} from "lucide-react";
+import {ButtonType} from "./BasicButtonDefinitions.ts";
+
+type CircularIconButtonProps = {
+    icon: LucideIcon;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * Circular button component
+ */
+export default function CircularIconButton({
+                                               onClick,
+                                               icon: Icon,
+                                               className = "",
+                                               disabled = false,
+                                               ...props
+                                           }: CircularIconButtonProps) {
+    return (
+        <button
+            className={`flex-shrink-0 w-7 h-7 rounded-full text-white flex items-center justify-center shadow-sm 
+                        ${ButtonType.PrimaryButton.backgroundColor} ${className}`}
+            onClick={onClick}
+            disabled={disabled}
+            {...props}
+        >
+            {Icon && (
+                <Icon
+                    size={defaultIconSize}
+                />
+            )}
+        </button>
+    );
+}