From 184ab10ef6aa9398a8f2bdc1676437c4abb307a5 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 30 Sep 2026 11:41:37 -0300
Subject: [PATCH 1/2] fix(BBButton): render type="button" by default

BBButton renders its underlying <button> without a type attribute, and
per the HTML spec such a button defaults to type="submit". Any BBButton
placed inside a <form> therefore submits it on click, on top of running
its own onClick handler. With no onSubmit handler this is a GET to the
current URL, i.e. a full page navigation; inside the BBB client that
hits the beforeunload handler and can drop the user out of the meeting.

Set type="button" on the <button> in every layout branch (circle/squared,
stacked and default), matching what other component libraries (MUI,
Chakra, Radix) do: a button inside a form must not submit it unless the
consumer explicitly asks for that.

Closes #82
---
 src/components/Button/component.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index f0fd766..12a4cc0 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -93,6 +93,7 @@ function Button(props: ButtonProps): JSX.Element {
       return (
         <Styled.Button
           id={id}
+          type="button"
           data-test={testId}
           onClick={handleClick}
           onKeyDown={onKeyDown}
@@ -125,6 +126,7 @@ function Button(props: ButtonProps): JSX.Element {
         <Styled.ButtonWrapper data-test={testId} $layout={layout}>
           <Styled.Button
             id={id}
+            type="button"
             onClick={handleClick}
             onKeyDown={onKeyDown}
             {...accessibilityProps}
@@ -174,6 +176,7 @@ function Button(props: ButtonProps): JSX.Element {
     return (
       <Styled.Button
         id={id}
+        type="button"
         data-test={testId}
         onClick={handleClick}
         onKeyDown={onKeyDown}

From f4217577cc2c651029e7881c955c9dedf6be8039 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 30 Sep 2026 11:41:42 -0300
Subject: [PATCH 2/2] feat(BBButton): add type prop

BBButton always renders type="button", so a consumer that genuinely
wants a submit or reset button has no way to get one: ButtonProps does
not accept a type prop, so passing it is rejected by TypeScript and
would not reach the DOM node anyway.

Expose type?: 'button' | 'submit' | 'reset', defaulting to 'button' so
the safe behavior stays the default and submitting a form remains an
explicit opt-in. The allowed values live in constants.ts (TYPES,
TYPE_VALUES, DEFAULT_TYPE) like the other Button enums, and are
documented in the Storybook argTypes and the component README.
---
 src/components/Button/README.md             | 13 +++++++++++++
 src/components/Button/component.stories.tsx |  8 ++++++++
 src/components/Button/component.tsx         |  8 +++++---
 src/components/Button/constants.ts          | 11 +++++++++++
 src/components/Button/type.ts               |  5 +++++
 5 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 9e6914e..8e7a673 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -51,6 +51,18 @@ import { MdPlayArrow } from 'react-icons/md';
 <BBButton layout="stacked" icon={<MdPlayArrow size={30} />} label="Settings" onClick={() => (console.log('clicked'))}/>
 ```
 
+### Submit Button
+
+`BBButton` renders `type="button"` by default, so it never submits an enclosing `<form>`. Pass `type="submit"` to opt in:
+
+```jsx
+import { BBButton } from 'bbb-ui-components-react';
+
+<form onSubmit={handleSubmit}>
+  <BBButton type="submit" label="Save" onClick={() => (console.log('clicked'))}/>
+</form>
+```
+
 ## Props
 
 | Property           | Type                                                              | Default           | Description                                                              |
@@ -69,6 +81,7 @@ import { MdPlayArrow } from 'react-icons/md';
 | `variant`          | `keyof typeof VARIANTS`                                           | `'primary'`       | The variant of the button.                                             |
 | `size`             | `keyof typeof SIZES`                                              | `'medium'`        | The size of the button.                                                |
 | `layout`           | `keyof typeof LAYOUTS`                                            | `'default'`       | The layout of the button.                                              |
+| `type`             | `'button' \| 'submit' \| 'reset'`                                 | `'button'`        | The native `type` attribute of the `<button>`. Defaults to `'button'` so it never submits an enclosing form unless `'submit'` is passed explicitly. |
 | `disabled`         | `boolean`                                                         | `false`           | If `true`, the button will be disabled.                                |
 | `children`         | `React.ReactNode`                                                 |                   | The content of the button, typically used for the 'default' layout.    |
 | `icon`             | `React.ReactNode`                                                 |                   | The icon to be displayed. Used for 'circle', 'squared' and 'stacked' layouts. |
diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx
index 83d251f..46df4d2 100644
--- a/src/components/Button/component.stories.tsx
+++ b/src/components/Button/component.stories.tsx
@@ -16,6 +16,8 @@ import {
   DEFAULT_VARIANT,
   DEFAULT_SIZE,
   DEFAULT_LAYOUT,
+  TYPE_VALUES,
+  DEFAULT_TYPE,
 } from './constants';
 
 const meta = {
@@ -64,6 +66,12 @@ const meta = {
       description: `Layout mode for the button. Allowed values: ${LAYOUT_VALUES.join(', ')}. Some props are layout-specific (see icon, iconStart/iconEnd, helperIcon).`,
       table: { defaultValue: { summary: `${DEFAULT_LAYOUT}` } },
     },
+    type: {
+      control: 'select',
+      options: TYPE_VALUES,
+      description: `Native \`type\` attribute of the underlying \`<button>\`. Allowed values: ${TYPE_VALUES.join(', ')}. Defaults to \`button\` so it never submits an enclosing form unless \`submit\` is passed explicitly.`,
+      table: { defaultValue: { summary: `${DEFAULT_TYPE}` } },
+    },
     disabled: {
       control: 'boolean',
       description: 'Disables interaction and applies disabled visuals. Works across all layouts.',
diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index 12a4cc0..e3db963 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -10,6 +10,7 @@ import {
   DEFAULT_LAYOUT,
   LAYOUTS,
   DEFAULT_TOOLTIP_PLACEMENT,
+  DEFAULT_TYPE,
 } from './constants';
 import * as Styled from './styles';
 import Tippy from '@tippyjs/react';
@@ -39,6 +40,7 @@ function Button(props: ButtonProps): JSX.Element {
     variant = DEFAULT_VARIANT,
     size = DEFAULT_SIZE,
     layout = DEFAULT_LAYOUT,
+    type = DEFAULT_TYPE,
     disabled = false,
     children,
     showFeedback = false,
@@ -93,7 +95,7 @@ function Button(props: ButtonProps): JSX.Element {
       return (
         <Styled.Button
           id={id}
-          type="button"
+          type={type}
           data-test={testId}
           onClick={handleClick}
           onKeyDown={onKeyDown}
@@ -126,7 +128,7 @@ function Button(props: ButtonProps): JSX.Element {
         <Styled.ButtonWrapper data-test={testId} $layout={layout}>
           <Styled.Button
             id={id}
-            type="button"
+            type={type}
             onClick={handleClick}
             onKeyDown={onKeyDown}
             {...accessibilityProps}
@@ -176,7 +178,7 @@ function Button(props: ButtonProps): JSX.Element {
     return (
       <Styled.Button
         id={id}
-        type="button"
+        type={type}
         data-test={testId}
         onClick={handleClick}
         onKeyDown={onKeyDown}
diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts
index 5df5521..9e9ed64 100644
--- a/src/components/Button/constants.ts
+++ b/src/components/Button/constants.ts
@@ -62,6 +62,14 @@ const TOOLTIP_PLACEMENTS = {
 const TOOLTIP_PLACEMENT_VALUES = Object.values(TOOLTIP_PLACEMENTS);
 const DEFAULT_TOOLTIP_PLACEMENT = TOOLTIP_PLACEMENTS.TOP;
 
+const TYPES = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+  RESET: 'reset',
+} as const;
+const TYPE_VALUES = Object.values(TYPES);
+const DEFAULT_TYPE = TYPES.BUTTON;
+
 const CSS_COLOR_PROPERTIES: CSSColorPropertiesType = {
   primary: {
     default: {
@@ -219,6 +227,9 @@ export {
   TOOLTIP_PLACEMENTS,
   TOOLTIP_PLACEMENT_VALUES,
   DEFAULT_TOOLTIP_PLACEMENT,
+  TYPES,
+  TYPE_VALUES,
+  DEFAULT_TYPE,
   CSS_COLOR_PROPERTIES,
   CSS_COLOR_PROPERTIES_DISABLED,
   CSS_SIZE_PROPERTIES,
diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts
index bc38ae0..afee43e 100644
--- a/src/components/Button/type.ts
+++ b/src/components/Button/type.ts
@@ -6,6 +6,7 @@ import {
   VARIANT_VALUES,
   LAYOUTS,
   TOOLTIP_PLACEMENT_VALUES,
+  TYPE_VALUES,
 } from './constants';
 
 export type EssentialColorProperties = {
@@ -42,6 +43,7 @@ type ColorType = typeof COLOR_VALUES[number];
 type SizeType = typeof SIZE_VALUES[number];
 type LayoutType = typeof LAYOUT_VALUES[number];
 type TooltipPlacementType = typeof TOOLTIP_PLACEMENT_VALUES[number];
+type ButtonType = typeof TYPE_VALUES[number];
 
 export interface StyledHelperIconContainer {
   $hover: boolean;
@@ -101,6 +103,9 @@ type BaseButtonProps = {
   /** Button size; affects padding and, for the `circle`/`squared` layouts, the overall box size (both render at the same size). @default 'md' */
   size?: SizeType;
 
+  /** Native `type` attribute of the `<button>`; defaults to `'button'` so it never submits an enclosing form unless `'submit'` is passed explicitly. @default 'button' */
+  type?: ButtonType;
+
   /** Disables interaction and applies disabled styling. @default false */
   disabled?: boolean;