diff --git a/packages/webawesome/docs/_includes/visual-tests/size.njk b/packages/webawesome/docs/_includes/visual-tests/size.njk
index 418159dad..312da1b31 100644
--- a/packages/webawesome/docs/_includes/visual-tests/size.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/size.njk
@@ -40,66 +40,6 @@
-
Button Group
-
-
-
-
Callout
diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md
index f3f57f7fc..b84debe74 100644
--- a/packages/webawesome/docs/docs/components/button-group.md
+++ b/packages/webawesome/docs/docs/components/button-group.md
@@ -15,41 +15,6 @@ category: Actions
## Examples
-### Button Sizes
-
-Unless otherwise specified,
-the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
-
-```html {.example}
-
- Left
- Center
- Right
-
-
-
-
-
- Left
- Center
- Right
-
-
-
-
-
- Left
- Center
- Right
-
-```
-
-:::info
-While you can still set the size of [buttons](/docs/components/button) individually,
-and it will override the inherited size,
-it is rarely a good idea to mix sizes within the same button group.
-:::
-
### Vertical Button Groups
Set the `orientation` attribute to `vertical` to make a vertical button group.
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 3dd1b6e9d..bcb298757 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ Components with the Experimental badge sh
- Added the `auto-width` attribute to automatically size icons, since FA7 is fixed-width by default now
- Improved support for duotone icons in ``, including custom colors, custom opacity, and opacity swapping
- Removed the `fixed-width` attribute as it's now the default behavior
+- 🚨 BREAKING: Removed the `size` attribute from `` as it only set the initial size and gets out of sync when buttons are updated (apply a `size` to each button instead)
- Added the Hindi translation [pr:1307]
- Fixed incorrectly named exported tooltip parts in `` [pr:1277]
- Fixed a bug in `` that caused menus to overflow the viewport instead of resizing [issue:1267]
diff --git a/packages/webawesome/src/components/button-group/button-group.ts b/packages/webawesome/src/components/button-group/button-group.ts
index b0027fe23..df776767b 100644
--- a/packages/webawesome/src/components/button-group/button-group.ts
+++ b/packages/webawesome/src/components/button-group/button-group.ts
@@ -3,7 +3,6 @@ import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import type WaButton from '../button/button.js';
import styles from './button-group.css';
@@ -20,7 +19,7 @@ import styles from './button-group.css';
*/
@customElement('wa-button-group')
export default class WaButtonGroup extends WebAwesomeElement {
- static css = [sizeStyles, variantStyles, styles];
+ static css = [variantStyles, styles];
@query('slot') defaultSlot: HTMLSlotElement;
@@ -36,9 +35,6 @@ export default class WaButtonGroup extends WebAwesomeElement {
/** The button group's orientation. */
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
- /** The component's size. */
- @property({ reflect: true }) size: 'small' | 'medium' | 'large'; // unset by default to not override child elements
-
/** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
@@ -85,7 +81,6 @@ export default class WaButtonGroup extends WebAwesomeElement {
if (button) {
if ((button as WaButton).appearance === 'outlined') this.hasOutlined = true;
- if (this.size) button.setAttribute('size', this.size);
button.classList.add('wa-button-group__button');
button.classList.toggle('wa-button-group__horizontal', this.orientation === 'horizontal');
button.classList.toggle('wa-button-group__vertical', this.orientation === 'vertical');