✨(front) add loader and icon props to Button

These shortcuts improve DX and will be used in the next commits.

src/frontend/src/primitives/Button.tsx

@@ -6,12 +6,15 @@ import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 import { ReactNode } from 'react'
+import { Loader } from './Loader'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
   TooltipWrapperProps & {
     // Use tooltip as description below the button.
     description?: boolean
+  } & {
+    icon?: ReactNode
   }
 
 export const Button = ({
@@ -20,13 +23,16 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+  const { className, ...remainingComponentProps } = componentProps
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton
-        className={buttonRecipe(variantProps)}
+        className={[buttonRecipe(variantProps), className].join(' ')}
-        {...(componentProps as RACButtonsProps)}
+        {...(remainingComponentProps as RACButtonsProps)}
       >
+        {!props.loading && props.icon}
+        {props.loading && <Loader />}
         {componentProps.children as ReactNode}
         {props.description && <span>{tooltip}</span>}
       </RACButton>

src/frontend/src/primitives/buttonRecipe.ts

@@ -11,6 +11,7 @@ export const buttonRecipe = cva({
     '&[data-disabled]': {
       cursor: 'default',
     },
+    gap: '0.5rem',
   },
   variants: {
     size: {
@@ -266,6 +267,9 @@ export const buttonRecipe = cva({
         width: 'full',
       },
     },
+    loading: {
+      true: {},
+    },
     // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
     shySelected: {
       true: {},