diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart
index 0d20adb6c..07cb78f3e 100644
--- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart
+++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart
@@ -55,6 +55,7 @@ const _boxUtility = MixableUtility(
   ],
 );
 
+//TODO: Find a way to reuse as much code as possible from the FlexSpec and BoxSpec
 @MixableSpec()
 final class FlexBoxSpec extends Spec<FlexBoxSpec>
     with _$FlexBoxSpec, Diagnosticable {
diff --git a/packages/mix_generator/lib/src/helpers/type_ref_repository.dart b/packages/mix_generator/lib/src/helpers/type_ref_repository.dart
index 54f033372..07dc4f8f3 100644
--- a/packages/mix_generator/lib/src/helpers/type_ref_repository.dart
+++ b/packages/mix_generator/lib/src/helpers/type_ref_repository.dart
@@ -1,4 +1,5 @@
 import 'package:analyzer/dart/element/type.dart';
+
 import 'builder_utils.dart';
 import 'helpers.dart';
 
@@ -44,6 +45,7 @@ class TypeRefRepository {
     'TextSpec': 'TextSpecAttribute',
     'ImageSpec': 'ImageSpecAttribute',
     'IconSpec': 'IconSpecAttribute',
+    'FlexBoxSpec': 'FlexBoxSpecAttribute',
     'StackSpec': 'StackSpecAttribute',
   };
 
diff --git a/packages/remix/lib/src/components/button/button.dart b/packages/remix/lib/src/components/button/button.dart
index 486d3e131..5f96bae3f 100644
--- a/packages/remix/lib/src/components/button/button.dart
+++ b/packages/remix/lib/src/components/button/button.dart
@@ -16,8 +16,7 @@ part 'button_widget.dart';
 
 @MixableSpec()
 class ButtonSpec extends Spec<ButtonSpec> with _$ButtonSpec, Diagnosticable {
-  final FlexSpec flex;
-  final BoxSpec container;
+  final FlexBoxSpec flexbox;
   final IconSpec icon;
   final TextSpec label;
 
@@ -30,15 +29,13 @@ class ButtonSpec extends Spec<ButtonSpec> with _$ButtonSpec, Diagnosticable {
   static const from = _$ButtonSpec.from;
 
   const ButtonSpec({
-    BoxSpec? container,
-    FlexSpec? flex,
+    FlexBoxSpec? flexbox,
     IconSpec? icon,
     TextSpec? label,
     super.modifiers,
     SpinnerSpec? spinner,
     super.animated,
-  })  : flex = flex ?? const FlexSpec(),
-        container = container ?? const BoxSpec(),
+  })  : flexbox = flexbox ?? const FlexBoxSpec(),
         icon = icon ?? const IconSpec(),
         label = label ?? const TextSpec(),
         spinner = spinner ?? const SpinnerSpec();
diff --git a/packages/remix/lib/src/components/button/button.g.dart b/packages/remix/lib/src/components/button/button.g.dart
index 27b9cd3e2..c6b475596 100644
--- a/packages/remix/lib/src/components/button/button.g.dart
+++ b/packages/remix/lib/src/components/button/button.g.dart
@@ -33,8 +33,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
   /// replaced with the new values.
   @override
   ButtonSpec copyWith({
-    BoxSpec? container,
-    FlexSpec? flex,
+    FlexBoxSpec? flexbox,
     IconSpec? icon,
     TextSpec? label,
     WidgetModifiersData? modifiers,
@@ -42,8 +41,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
     AnimatedData? animated,
   }) {
     return ButtonSpec(
-      container: container ?? _$this.container,
-      flex: flex ?? _$this.flex,
+      flexbox: flexbox ?? _$this.flexbox,
       icon: icon ?? _$this.icon,
       label: label ?? _$this.label,
       modifiers: modifiers ?? _$this.modifiers,
@@ -63,8 +61,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
   /// The interpolation is performed on each property of the [ButtonSpec] using the appropriate
   /// interpolation method:
   ///
-  /// - [BoxSpec.lerp] for [container].
-  /// - [FlexSpec.lerp] for [flex].
+  /// - [FlexBoxSpec.lerp] for [flexbox].
   /// - [IconSpec.lerp] for [icon].
   /// - [TextSpec.lerp] for [label].
 
@@ -79,8 +76,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
     if (other == null) return _$this;
 
     return ButtonSpec(
-      container: _$this.container.lerp(other.container, t),
-      flex: _$this.flex.lerp(other.flex, t),
+      flexbox: _$this.flexbox.lerp(other.flexbox, t),
       icon: _$this.icon.lerp(other.icon, t),
       label: _$this.label.lerp(other.label, t),
       modifiers: other.modifiers,
@@ -95,8 +91,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
   /// compare two [ButtonSpec] instances for equality.
   @override
   List<Object?> get props => [
-        _$this.container,
-        _$this.flex,
+        _$this.flexbox,
         _$this.icon,
         _$this.label,
         _$this.modifiers,
@@ -108,9 +103,7 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
 
   void _debugFillProperties(DiagnosticPropertiesBuilder properties) {
     properties.add(
-        DiagnosticsProperty('container', _$this.container, defaultValue: null));
-    properties
-        .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null));
+        DiagnosticsProperty('flexbox', _$this.flexbox, defaultValue: null));
     properties
         .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null));
     properties
@@ -133,15 +126,13 @@ mixin _$ButtonSpec on Spec<ButtonSpec> {
 /// the [ButtonSpec] constructor.
 class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
     with Diagnosticable {
-  final BoxSpecAttribute? container;
-  final FlexSpecAttribute? flex;
+  final FlexBoxSpecAttribute? flexbox;
   final IconSpecAttribute? icon;
   final TextSpecAttribute? label;
   final SpinnerSpecAttribute? spinner;
 
   const ButtonSpecAttribute({
-    this.container,
-    this.flex,
+    this.flexbox,
     this.icon,
     this.label,
     super.modifiers,
@@ -160,8 +151,7 @@ class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
   @override
   ButtonSpec resolve(MixData mix) {
     return ButtonSpec(
-      container: container?.resolve(mix),
-      flex: flex?.resolve(mix),
+      flexbox: flexbox?.resolve(mix),
       icon: icon?.resolve(mix),
       label: label?.resolve(mix),
       modifiers: modifiers?.resolve(mix),
@@ -183,8 +173,7 @@ class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
     if (other == null) return this;
 
     return ButtonSpecAttribute(
-      container: container?.merge(other.container) ?? other.container,
-      flex: flex?.merge(other.flex) ?? other.flex,
+      flexbox: flexbox?.merge(other.flexbox) ?? other.flexbox,
       icon: icon?.merge(other.icon) ?? other.icon,
       label: label?.merge(other.label) ?? other.label,
       modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers,
@@ -199,8 +188,7 @@ class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
   /// compare two [ButtonSpecAttribute] instances for equality.
   @override
   List<Object?> get props => [
-        container,
-        flex,
+        flexbox,
         icon,
         label,
         modifiers,
@@ -211,9 +199,7 @@ class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties
-        .add(DiagnosticsProperty('container', container, defaultValue: null));
-    properties.add(DiagnosticsProperty('flex', flex, defaultValue: null));
+    properties.add(DiagnosticsProperty('flexbox', flexbox, defaultValue: null));
     properties.add(DiagnosticsProperty('icon', icon, defaultValue: null));
     properties.add(DiagnosticsProperty('label', label, defaultValue: null));
     properties
@@ -230,11 +216,8 @@ class ButtonSpecAttribute extends SpecAttribute<ButtonSpec>
 /// Use the methods of this class to configure specific properties of a [ButtonSpec].
 class ButtonSpecUtility<T extends Attribute>
     extends SpecUtility<T, ButtonSpecAttribute> {
-  /// Utility for defining [ButtonSpecAttribute.container]
-  late final container = BoxSpecUtility((v) => only(container: v));
-
-  /// Utility for defining [ButtonSpecAttribute.flex]
-  late final flex = FlexSpecUtility((v) => only(flex: v));
+  /// Utility for defining [ButtonSpecAttribute.flexbox]
+  late final flexbox = FlexBoxSpecUtility((v) => only(flexbox: v));
 
   /// Utility for defining [ButtonSpecAttribute.icon]
   late final icon = IconSpecUtility((v) => only(icon: v));
@@ -262,8 +245,7 @@ class ButtonSpecUtility<T extends Attribute>
   /// Returns a new [ButtonSpecAttribute] with the specified properties.
   @override
   T only({
-    BoxSpecAttribute? container,
-    FlexSpecAttribute? flex,
+    FlexBoxSpecAttribute? flexbox,
     IconSpecAttribute? icon,
     TextSpecAttribute? label,
     WidgetModifiersDataDto? modifiers,
@@ -271,8 +253,7 @@ class ButtonSpecUtility<T extends Attribute>
     AnimatedDataDto? animated,
   }) {
     return builder(ButtonSpecAttribute(
-      container: container,
-      flex: flex,
+      flexbox: flexbox,
       icon: icon,
       label: label,
       modifiers: modifiers,
diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart
index 9d8c69f97..68b2cfb6f 100644
--- a/packages/remix/lib/src/components/button/button_style.dart
+++ b/packages/remix/lib/src/components/button/button_style.dart
@@ -7,14 +7,6 @@ class ButtonStyle extends SpecStyle<ButtonSpecUtility> {
   Style makeStyle(SpecConfiguration<ButtonSpecUtility> spec) {
     final $ = spec.utilities;
 
-    final flexStyle = [
-      $.flex.chain
-        ..mainAxisAlignment.center()
-        ..crossAxisAlignment.center()
-        ..mainAxisSize.min()
-        ..gap(8),
-    ];
-
     final iconStyle = [
       $.icon.chain
         ..size(24)
@@ -38,20 +30,23 @@ class ButtonStyle extends SpecStyle<ButtonSpecUtility> {
         ..color.white(),
     ];
 
-    final containerStyle = [
-      $.container.chain
+    final flexboxStyle = [
+      $.flexbox.chain
         ..borderRadius(6)
         ..color.black()
         ..padding.vertical(8)
-        ..padding.horizontal(12),
-      spec.on.disabled($.container.color.grey.shade400()),
+        ..padding.horizontal(12)
+        ..flex.mainAxisAlignment.center()
+        ..flex.crossAxisAlignment.center()
+        ..flex.mainAxisSize.min()
+        ..flex.gap(8),
+      spec.on.disabled($.flexbox.color.grey.shade400()),
     ];
 
     return Style.create([
-      ...flexStyle,
+      ...flexboxStyle,
       ...iconStyle,
       ...labelStyle,
-      ...containerStyle,
       ...spinnerStyle,
     ]);
   }
@@ -66,7 +61,7 @@ class ButtonDarkStyle extends ButtonStyle {
 
     return Style.create([
       super.makeStyle(spec).call(),
-      $.container.color.white(),
+      $.flexbox.color.white(),
       $.label.style.color.black(),
     ]);
   }
diff --git a/packages/remix/lib/src/components/button/button_theme.dart b/packages/remix/lib/src/components/button/button_theme.dart
index a4f63570c..25ba09924 100644
--- a/packages/remix/lib/src/components/button/button_theme.dart
+++ b/packages/remix/lib/src/components/button/button_theme.dart
@@ -17,17 +17,17 @@ class FortalezaButtonStyle extends ButtonStyle {
     final baseStyle = super.makeStyle(spec);
     final baseOverrides = Style(
       baseStyle(),
-      $.container.chain
+      $.flexbox.chain
         ..padding.vertical.$space(2)
-        ..padding.horizontal.$space(3),
-      $.flex.gap.$space(2),
+        ..padding.horizontal.$space(3)
+        ..flex.gap.$space(2),
       $.label.style.$text(2),
       $.icon.size(14),
       $.spinner.size(14),
     );
 
     final onDisabledForeground = $on.disabled(
-      $.container.color.$neutral(7),
+      $.flexbox.color.$neutral(7),
       $.label.style.color.$neutral(8),
       $.icon.color.$neutral(8),
       $.spinner.color.$neutral(7),
@@ -36,25 +36,25 @@ class FortalezaButtonStyle extends ButtonStyle {
     final spinnerDisabled = $.spinner.color.$neutralAlpha(7);
 
     final solidVariant = Style(
-      $.container.color.$accent(),
+      $.flexbox.color.$accent(),
       $.label.style.color.white(),
       $.spinner.color.white(),
       $.icon.color.white(),
-      spec.on.hover($.container.color.$accent(10)),
-      spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled),
+      spec.on.hover($.flexbox.color.$accent(10)),
+      spec.on.disabled($.flexbox.color.$neutralAlpha(3), spinnerDisabled),
     );
 
     final softVariant = Style(
-      $.container.color.$accentAlpha(3),
+      $.flexbox.color.$accentAlpha(3),
       $.label.style.color.$accentAlpha(11),
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(4)),
-      spec.on.disabled($.container.color.$neutralAlpha(3)),
+      spec.on.hover($.flexbox.color.$accentAlpha(4)),
+      spec.on.disabled($.flexbox.color.$neutralAlpha(3)),
     );
 
     final outlineVariant = Style(
-      $.container.chain
+      $.flexbox.chain
         ..color.transparent()
         ..border.width(1)
         ..border.strokeAlign(0)
@@ -62,9 +62,9 @@ class FortalezaButtonStyle extends ButtonStyle {
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
       $.label.style.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(2)),
+      spec.on.hover($.flexbox.color.$accentAlpha(2)),
       spec.on.disabled(
-        $.container.chain
+        $.flexbox.chain
           ..border.color.$neutralAlpha(8)
           ..color.transparent(),
       ),
@@ -72,22 +72,22 @@ class FortalezaButtonStyle extends ButtonStyle {
 
     final surfaceVariant = Style(
       outlineVariant(),
-      $.container.color.$accentAlpha(3),
+      $.flexbox.color.$accentAlpha(3),
       spec.on.hover(
-        $.container.color.$accentAlpha(4),
-        $.container.border.color.$accentAlpha(8),
+        $.flexbox.color.$accentAlpha(4),
+        $.flexbox.border.color.$accentAlpha(8),
       ),
-      spec.on.disabled($.container.color.$neutral(1)),
+      spec.on.disabled($.flexbox.color.$neutral(1)),
     );
 
     final ghostVariant = Style(
-      $.container.border.style.none(),
-      $.container.color.transparent(),
+      $.flexbox.border.style.none(),
+      $.flexbox.color.transparent(),
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
       $.label.style.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(3)),
-      spec.on.disabled($.container.color.transparent()),
+      spec.on.hover($.flexbox.color.$accentAlpha(3)),
+      spec.on.disabled($.flexbox.color.transparent()),
     );
 
     return Style.create(
diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart
index 5bf622a20..4d7ac5bb3 100644
--- a/packages/remix/lib/src/components/button/button_widget.dart
+++ b/packages/remix/lib/src/components/button/button_widget.dart
@@ -53,6 +53,8 @@ class Button extends StatelessWidget {
     final configuration = SpecConfiguration(context, ButtonSpecUtility.self);
 
     return Pressable(
+      enabled: !isDisabled,
+      onPress: disabled || loading ? null : onPressed,
       child: SpecBuilder(
         style: style.makeStyle(configuration).applyVariants([
           ...variants,
@@ -71,8 +73,6 @@ class Button extends StatelessWidget {
           );
         },
       ),
-      enabled: !isDisabled,
-      onPress: disabled || loading ? null : onPressed,
     );
   }
 }
@@ -113,7 +113,7 @@ class ButtonSpecWidget extends StatelessWidget {
   }
 
   Widget _buildChildren(ButtonSpec spec) {
-    final flexWidget = spec.flex(
+    final flexboxWidget = spec.flexbox(
       children: [
         if (iconLeft != null) spec.icon(iconLeft),
         // If there is no icon always render the label
@@ -123,13 +123,13 @@ class ButtonSpecWidget extends StatelessWidget {
       direction: Axis.horizontal,
     );
 
-    return loading ? _buildLoadingOverlay(spec, flexWidget) : flexWidget;
+    return loading ? _buildLoadingOverlay(spec, flexboxWidget) : flexboxWidget;
   }
 
   @override
   Widget build(BuildContext context) {
     final spec = this.spec ?? const ButtonSpec();
 
-    return spec.container(child: _buildChildren(spec));
+    return _buildChildren(spec);
   }
 }
diff --git a/packages/remix/test/components/button/button_widget_test.dart b/packages/remix/test/components/button/button_widget_test.dart
index 155ae50fe..af7e082f6 100644
--- a/packages/remix/test/components/button/button_widget_test.dart
+++ b/packages/remix/test/components/button/button_widget_test.dart
@@ -170,7 +170,7 @@ class FakeButtonStyle extends ButtonStyle {
     final baseStyle = super.makeStyle(spec);
     return Style.create([
       baseStyle(),
-      $.container.color(color),
+      $.flexbox.color(color),
     ]);
   }
 }