Describe the bug
BBButton renders its underlying <button> element without a type attribute. Per the HTML spec, a <button> with no type defaults to type="submit". As a result, any BBButton placed inside a <form> triggers a native form submission on click, on top of running its own onClick handler.
Consumers cannot opt out: ButtonProps (src/components/Button/type.ts) does not expose a type prop, so passing type="button" is rejected by TypeScript and would not be forwarded to the DOM node anyway.
All three render branches are affected — circle/squared, stacked and default. None of them sets type on Styled.Button:
src/components/Button/component.tsx:94 (circle / squared)
src/components/Button/component.tsx:126 (stacked)
src/components/Button/component.tsx:175 (default)
src/components/Button/styles.ts:163 — export const Button = styled.button<StyledButtonProps>
To Reproduce
Steps to reproduce the behavior:
- Render a
BBButton inside a <form> that has no onSubmit handler:
<form>
<BBBTextAreaInput placeholder="Type something" />
<BBButton
layout="circle"
icon={<SendIcon />}
onClick={handleSend}
ariaLabel="Send"
/>
</form>
- Click the button.
- The
onClick handler runs, and then the browser performs the form's default submission —
a GET to the current URL, i.e. a full page navigation.
- Inside the BBB client that navigation hits the client's
beforeunload handler, so the
browser shows the "Reload site? Changes you made may not be saved." dialog. Confirming it
drops the user out of the meeting.
Expected behavior
BBButton should render type="button" by default, as other component libraries do (MUI, Chakra, Radix). A button inside a form should not submit it unless the consumer explicitly asks for that.
Optionally, ButtonProps could also expose type?: 'button' | 'submit' | 'reset' defaulting to 'button', so a consumer that genuinely wants a submit button can opt in.
Actual behavior
The rendered <button> carries no type attribute and therefore behaves as type="submit".
Clicking a BBButton inside a form submits it and navigates the page, and there is no supported way to override this from the consumer side.
Describe the bug
BBButtonrenders its underlying<button>element without atypeattribute. Per the HTML spec, a<button>with notypedefaults totype="submit". As a result, anyBBButtonplaced inside a<form>triggers a native form submission on click, on top of running its ownonClickhandler.Consumers cannot opt out:
ButtonProps(src/components/Button/type.ts) does not expose atypeprop, so passingtype="button"is rejected by TypeScript and would not be forwarded to the DOM node anyway.All three render branches are affected —
circle/squared,stackedanddefault. None of them setstypeonStyled.Button:src/components/Button/component.tsx:94(circle / squared)src/components/Button/component.tsx:126(stacked)src/components/Button/component.tsx:175(default)src/components/Button/styles.ts:163—export const Button = styled.button<StyledButtonProps>To Reproduce
Steps to reproduce the behavior:
BBButtoninside a<form>that has noonSubmithandler:onClickhandler runs, and then the browser performs the form's default submission —a GET to the current URL, i.e. a full page navigation.
beforeunloadhandler, so thebrowser shows the "Reload site? Changes you made may not be saved." dialog. Confirming it
drops the user out of the meeting.
Expected behavior
BBButtonshould rendertype="button"by default, as other component libraries do (MUI, Chakra, Radix). A button inside a form should not submit it unless the consumer explicitly asks for that.Optionally,
ButtonPropscould also exposetype?: 'button' | 'submit' | 'reset'defaulting to'button', so a consumer that genuinely wants a submit button can opt in.Actual behavior
The rendered
<button>carries notypeattribute and therefore behaves astype="submit".Clicking a
BBButtoninside a form submits it and navigates the page, and there is no supported way to override this from the consumer side.