refactor(ui): button only submits form if onClick is undefined

front/src/components/ui/Button.vue

@@ -18,7 +18,7 @@ const props = defineProps<{
   round?: boolean
   icon?: string | `right ${string}`
 
-  onClick?: (...args: any[]) => void | Promise<void>
+  onClick?: (...args: any[]) => void | Promise<void> // The default fallback is `submit`
 
   split?: boolean  // Add this prop for split button support
   splitIcon?: string  // Add this prop for the split button icon
@@ -142,6 +142,7 @@ onMounted(() => {
     'is-shadow': shadow,
   }"
   @click="click"
+  :type="onClick ? 'button' : 'submit' /* Prevents default `submit` if onCLick is set */"
 >
   <i v-if="icon && !icon.startsWith('right ')" :class="['bi', icon]" />
   <span v-if="!isIconOnly">

front/ui-docs/components/ui/button.md

@@ -36,6 +36,22 @@ Buttons are UI elements that users can interact with to perform actions and mani
   & AlignmentProps
 ```
 
+## Action
+
+[The default action of buttons is `submit` \[mdn\]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type). Specify an `onClick` function to change the behavior of a button.
+
+```vue-html
+<form>
+  <Button>Without `onClick`</Button>
+  <Button :onClick="() => {}">With `onClick`</Button>
+</form>
+```
+
+<form>
+  <Button>Without `onClick`</Button>
+  <Button :onClick="() => {}">With `onClick`</Button>
+</form>
+
 ## Button colors
 
 Buttons come in different types depending on the type of action they represent.