From a6281aa06ac36a3efaadb56518c49e0a63d6f816 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Fri, 2 Oct 2026 10:21:42 -0300
Subject: [PATCH 1/4] fix(BBButton): keep 1px transparent border when disabled

A disabled BBButton renders 2px narrower and 2px shorter than the same
button enabled. The enabled style reserves a 1px transparent border when
the color has no visible border, but the disabled style sets
`border: none`. The disabled palette has no border color, so every
disabled button drops its border, and toggling `disabled` resizes the
button and moves the layout around it (e.g. the Share button in the BBB
media-sharing modal shifts its anchored modal by 2px).

Fall back to `1px solid transparent` in the disabled branch, matching
the enabled style, so the box is the same in both states.
---
 src/components/Button/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index b44c596..2219e6c 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -90,13 +90,13 @@ const commonButtonStyles = css<StyledButtonProps>`
       }
       color: ${color};
       ${background ? `background-color: ${background}` : `background-color: none`};
-      border: ${border ? `1px solid ${border}` : 'none'};
+      border: ${border ? `1px solid ${border}` : '1px solid transparent'};
 
       &&:hover,
       &&:active {
         color: ${color};
         ${background ? `background-color: ${background}` : `background-color: none`};
-        border: ${border ? `1px solid ${border}` : 'none'};
+        border: ${border ? `1px solid ${border}` : '1px solid transparent'};
       }
       
       &&:focus {

From e46e2a35a875e1e395e84be3e12097c707d8c71d Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Fri, 2 Oct 2026 10:21:42 -0300
Subject: [PATCH 2/4] fix(BBButton): use valid transparent fallback for
 disabled background

The disabled style falls back to `background-color: none`, which is not
valid CSS and is dropped by the browser. Use `transparent`, which is
what the fallback means. The branch is unreachable with the current
disabled palette, but it should stay correct if the palette changes.
---
 src/components/Button/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 2219e6c..8e257de 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -89,13 +89,13 @@ const commonButtonStyles = css<StyledButtonProps>`
         color: ${color};
       }
       color: ${color};
-      ${background ? `background-color: ${background}` : `background-color: none`};
+      ${background ? `background-color: ${background}` : `background-color: transparent`};
       border: ${border ? `1px solid ${border}` : '1px solid transparent'};
 
       &&:hover,
       &&:active {
         color: ${color};
-        ${background ? `background-color: ${background}` : `background-color: none`};
+        ${background ? `background-color: ${background}` : `background-color: transparent`};
         border: ${border ? `1px solid ${border}` : '1px solid transparent'};
       }
       

From e42ec7074eb4a7a659bb76897137e709841317c1 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Fri, 2 Oct 2026 13:16:30 -0300
Subject: [PATCH 3/4] feat(BBButton): add fullWidth prop and forward className

BBButton sizes itself to its label and gives consumers no way to change
that: it has no width prop and does not forward `className`, so
`styled(BBButton)` has no effect. Consumers that need a button to fill
a footer, popover or dialog row wrap it in a div and reach into it with
a `> *` child selector, which depends on the component's markup and
targets the wrong element in the stacked layout, where the root is a
wrapper div rather than the <button>.

Add a `fullWidth` prop to the default layout that makes the button fill
its container with the content still centered. It switches the button
to `display: flex` so it does not leave the inline-flex baseline gap
below it. The circle, squared and stacked layouts are fixed-size boxes,
so the prop is not offered there.

Forward `className` to the root element of every layout, so one-off
needs such as a minimum width for short labels, margins or letting a
long label wrap work through `styled(BBButton)`. It is documented as an
escape hatch while the component is being adopted: overrides stay
greppable as `styled(BBButton)`, so the recurring ones can later be
turned into native props.

`style` is deliberately not forwarded. Inline overrides add nothing that
`styled()` does not already cover, they are harder to audit, and they
would widen the public API that has to be narrowed again later.
---
 src/components/Button/README.md             | 23 +++++++++++
 src/components/Button/component.stories.tsx | 43 +++++++++++++++++++++
 src/components/Button/component.tsx         | 12 +++++-
 src/components/Button/styles.ts             |  5 ++-
 src/components/Button/type.ts               |  7 ++++
 5 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 8e7a673..5c77aa3 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -63,6 +63,27 @@ import { BBButton } from 'bbb-ui-components-react';
 </form>
 ```
 
+### Full-width Button
+
+```jsx
+import { BBButton } from 'bbb-ui-components-react';
+
+<BBButton label="Share" fullWidth onClick={() => (console.log('clicked'))}/>
+```
+
+### Extending with `styled()`
+
+`className` is forwarded to the root element (the `<button>`, or the wrapper `<div>` in the `stacked` layout), so `BBButton` can be extended with `styled()`. This is an escape hatch while `BBButton` is being adopted: prefer native props such as `fullWidth`, and open an issue for any override you find yourself repeating, so it can become a prop.
+
+```jsx
+import styled from 'styled-components';
+import { BBButton } from 'bbb-ui-components-react';
+
+const FooterButton = styled(BBButton)`
+  min-width: 8.5rem;
+`;
+```
+
 ## Props
 
 | Property           | Type                                                              | Default           | Description                                                              |
@@ -83,6 +104,8 @@ import { BBButton } from 'bbb-ui-components-react';
 | `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.                                |
+| `fullWidth`        | `boolean`                                                         | `false`           | If `true`, the button fills the width of its container, keeping its content centered. Used for 'default' layout. |
+| `className`        | `string`                                                          |                   | Class name forwarded to the root element (the `<button>`, or the wrapper `<div>` in the 'stacked' layout), so `styled(BBButton)` works. Escape hatch while BBButton is being adopted; prefer native props and open an issue for recurring needs. |
 | `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. |
 | `iconStart`        | `React.ReactNode`                                                 |                   | The icon to be displayed at the start of the button. Used for 'default' layout.|
diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx
index 46df4d2..8e39391 100644
--- a/src/components/Button/component.stories.tsx
+++ b/src/components/Button/component.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import BBButton from './component';
@@ -77,6 +78,15 @@ const meta = {
       description: 'Disables interaction and applies disabled visuals. Works across all layouts.',
       table: { defaultValue: { summary: 'false' } },
     },
+    fullWidth: {
+      control: 'boolean',
+      description: `Makes the button fill the width of its container, keeping its content centered. Only used in the 'default' layout.`,
+      table: { defaultValue: { summary: 'false' } },
+    },
+    className: {
+      control: false,
+      description: `Class name forwarded to the root element (the \`<button>\`, or the wrapper \`<div>\` in the 'stacked' layout), so \`styled(BBButton)\` works. Escape hatch while BBButton is being adopted; prefer native props and open an issue for recurring needs.`,
+    },
     icon: {
       control: false,
       description: `Main icon for the button. Commonly used for icon-only buttons (layouts 'circle' and 'squared') or in 'stacked' layout. When using a label, prefer \`iconStart\` or \`iconEnd\` in the 'default' layout.`,
@@ -378,6 +388,39 @@ export const Disabled: Story = {
   },
 };
 
+/** Shows a `fullWidth` button filling its container, with the label centered. */
+export const FullWidth: Story = {
+  args: {
+    label: 'Share',
+    fullWidth: true,
+  },
+  render: (args) => (
+    <div style={{ width: '20rem' }}>
+      <BBButton {...args} />
+    </div>
+  ),
+};
+
+const StyledFooterButton = styled(BBButton)`
+  min-width: 8.5rem;
+`;
+
+const StyledWrappingButton = styled(BBButton)`
+  width: 10rem;
+  white-space: normal;
+`;
+
+/** Customizes the button through `styled(BBButton)`: a minimum width for a short label, and a fixed width that lets a long label wrap. */
+export const StyledExtension: Story = {
+  name: 'Extended with styled()',
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <StyledFooterButton {...args} label="Yes" />
+      <StyledWrappingButton {...args} label="A long translated label that wraps" />
+    </div>
+  ),
+};
+
 /** Renders the same button with a tooltip in each of the available `tooltipPlacement` positions. */
 export const WithTooltip: Story = {
   name: 'With Tooltip (All Placements)',
diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index e3db963..acf13a8 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -46,6 +46,7 @@ function Button(props: ButtonProps): JSX.Element {
     showFeedback = false,
     feedbackContent = <MdCheckCircle fontSize="small" />,
     feedbackDuration = 2000,
+    className,
   } = props;
 
   const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -95,6 +96,7 @@ function Button(props: ButtonProps): JSX.Element {
       return (
         <Styled.Button
           id={id}
+          className={className}
           type={type}
           data-test={testId}
           onClick={handleClick}
@@ -125,7 +127,11 @@ function Button(props: ButtonProps): JSX.Element {
       const testId = dataTest || `${LAYOUTS.STACKED}-button-${id || label || 'default'}`;
 
       return (
-        <Styled.ButtonWrapper data-test={testId} $layout={layout}>
+        <Styled.ButtonWrapper
+          className={className}
+          data-test={testId}
+          $layout={layout}
+        >
           <Styled.Button
             id={id}
             type={type}
@@ -172,12 +178,13 @@ function Button(props: ButtonProps): JSX.Element {
       );
     }
 
-    const { iconStart, iconEnd } = props;
+    const { iconStart, iconEnd, fullWidth = false } = props;
     const testId = dataTest || `button-${id || label || 'default'}`;
 
     return (
       <Styled.Button
         id={id}
+        className={className}
         type={type}
         data-test={testId}
         onClick={handleClick}
@@ -187,6 +194,7 @@ function Button(props: ButtonProps): JSX.Element {
         $variant={variant}
         $size={size}
         $layout={layout}
+        $fullWidth={fullWidth}
         disabled={disabled}
       >
         {isFeedbackVisible ? (
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 8e257de..d6a29d6 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -145,8 +145,9 @@ const squaredLayoutStyles = css<StyledButtonProps>`
   border-radius: ${borderRadiusSmall};
 `;
 
-const defaultLayoutStyles = css`
-  display: inline-flex;
+const defaultLayoutStyles = css<StyledButtonProps>`
+  display: ${({ $fullWidth }) => ($fullWidth ? 'flex' : 'inline-flex')};
+  ${({ $fullWidth }) => $fullWidth && 'width: 100%;'}
   justify-content: center;
   align-items: center;
   gap: ${spacingSmall};
diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts
index afee43e..d091fee 100644
--- a/src/components/Button/type.ts
+++ b/src/components/Button/type.ts
@@ -60,6 +60,7 @@ export interface StyledButtonProps {
   $color?: ColorType;
   $size?: SizeType;
   $layout?: LayoutType;
+  $fullWidth?: boolean;
   disabled: boolean;
 }
 
@@ -124,6 +125,9 @@ type BaseButtonProps = {
 
   /** How long, in milliseconds, the click feedback stays visible. @default 2000 */
   feedbackDuration?: number;
+
+  /** Class name forwarded to the root element (the `<button>`, or the wrapper `<div>` in the `stacked` layout), so `styled(BBButton)` works. Escape hatch while BBButton is being adopted; prefer native props and open an issue for recurring needs. */
+  className?: string;
 }
 
 type DefaultLayoutProps = BaseButtonProps & {
@@ -135,6 +139,9 @@ type DefaultLayoutProps = BaseButtonProps & {
 
   /** Icon rendered after the label (right side); effective when a label is present. */
   iconEnd?: React.ReactNode;
+
+  /** Makes the button fill the width of its container, keeping its content centered. @default false */
+  fullWidth?: boolean;
 };
 
 type StackedLayoutProps = BaseButtonProps & {

From dca9319243c2275069d6b042b5c544b718310a70 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Fri, 2 Oct 2026 20:53:18 -0300
Subject: [PATCH 4/4] fix(BBButton): follow --color-hover-light in the neutral
 hover background

Buttons with the neutral color take their hover background from
colorBrandAux, which falls back from --color-brand-aux straight to the
library's light brand blue (#E5EFFB). Neither the BBB client nor its
custom styles define --color-brand-aux, so a client that rebrands
through --color-primary and --color-hover-light still gets a blue hover
on every neutral button, in every variant.

Fall back to --color-hover-light before the base light blue, so the
chain becomes --color-brand-aux -> --color-hover-light ->
--color-brand-light -> #E5EFFB. The aux variable still wins when set,
clients that rebrand the hover tint get it on neutral buttons too, and
clients that set neither keep the current #E5EFFB.
---
 src/stylesheets/palette.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stylesheets/palette.ts b/src/stylesheets/palette.ts
index d00cee3..cc57022 100644
--- a/src/stylesheets/palette.ts
+++ b/src/stylesheets/palette.ts
@@ -20,7 +20,7 @@ export const colorBrand2 = `var(--color-brand-2, ${colorBrand1_base})`;
 export const colorBrand3 = `var(--color-brand-3, ${colorBrand1_base})`;
 // Mapped to core css vars
 export const colorBrandLight = `var(--color-blue-aux, ${colorBrandLight_base})`;
-export const colorBrandAux = `var(--color-brand-aux, ${colorBrandLight_base})`;
+export const colorBrandAux = `var(--color-brand-aux, var(--color-hover-light, ${colorBrandLight_base}))`;
 
 
 // Semantic colors