Update IconButtonWithMenu to support label prop

src/views/Chores/IconButtonWithMenu.jsx

@@ -1,9 +1,10 @@
-import { Chip, Menu, MenuItem, Typography } from '@mui/joy'
+import { Button, Chip, Menu, MenuItem, Typography } from '@mui/joy'
 import IconButton from '@mui/joy/IconButton'
 import React, { useEffect, useRef, useState } from 'react'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
 
 const IconButtonWithMenu = ({
+  label,
   key,
   icon,
   options,
@@ -39,6 +40,7 @@ const IconButtonWithMenu = ({
 
   return (
     <>
+      {!label && (
         <IconButton
           onClick={handleMenuOpen}
           variant='outlined'
@@ -50,7 +52,24 @@ const IconButtonWithMenu = ({
           }}
         >
           {icon}
+          {label ? label : null}
         </IconButton>
+      )}
+      {label && (
+        <Button
+          onClick={handleMenuOpen}
+          variant='outlined'
+          color={isActive ? 'primary' : 'neutral'}
+          size='sm'
+          startDecorator={icon}
+          sx={{
+            height: 24,
+            borderRadius: 24,
+          }}
+        >
+          {label}
+        </Button>
+      )}
 
       <Menu
         key={key}