fix(BBButton): render type="button" by default and add type prop

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. |

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.',

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,6 +95,7 @@ function Button(props: ButtonProps): JSX.Element {
       return (
         <Styled.Button
           id={id}
+          type={type}
           data-test={testId}
           onClick={handleClick}
           onKeyDown={onKeyDown}
@@ -125,6 +128,7 @@ function Button(props: ButtonProps): JSX.Element {
         <Styled.ButtonWrapper data-test={testId} $layout={layout}>
           <Styled.Button
             id={id}
+            type={type}
             onClick={handleClick}
             onKeyDown={onKeyDown}
             {...accessibilityProps}
@@ -174,6 +178,7 @@ function Button(props: ButtonProps): JSX.Element {
     return (
       <Styled.Button
         id={id}
+        type={type}
         data-test={testId}
         onClick={handleClick}
         onKeyDown={onKeyDown}

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,

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;