diff --git a/packages/wyatt_ui_components/lib/src/core/core.dart b/packages/wyatt_ui_components/lib/src/core/core.dart
index 0b041fe7..d850e320 100644
--- a/packages/wyatt_ui_components/lib/src/core/core.dart
+++ b/packages/wyatt_ui_components/lib/src/core/core.dart
@@ -18,4 +18,5 @@ export 'enums/control_state.dart';
 export 'extensions/build_context_extensions.dart';
 export 'extensions/string_extension.dart';
 export 'mixins/copy_with_mixin.dart';
+export 'utils/multi_color.dart';
 export 'utils/text_wrapper.dart';
diff --git a/packages/wyatt_ui_components/lib/src/core/utils/multi_color.dart b/packages/wyatt_ui_components/lib/src/core/utils/multi_color.dart
new file mode 100644
index 00000000..47ff4488
--- /dev/null
+++ b/packages/wyatt_ui_components/lib/src/core/utils/multi_color.dart
@@ -0,0 +1,45 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/widgets.dart';
+
+class MultiColor {
+  const MultiColor(this._colors) : _color = null;
+  const MultiColor.single(this._color) : _colors = null;
+
+  final List<Color>? _colors;
+  final Color? _color;
+
+  Color get color {
+    if (_color != null) {
+      return _color!;
+    }
+    if (_colors?.isNotEmpty ?? false) {
+      return _colors!.first;
+    }
+    throw IndexError.withLength(
+      0,
+      _colors?.length ?? 0,
+      message: '_color is not defined or _colors is empty.',
+    );
+  }
+
+  List<Color> get colors => _colors ?? [];
+
+  bool get isGradient =>
+      (_colors?.isNotEmpty ?? false) && (_colors?.length ?? 0) > 1;
+}
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
index 47483bb7..362ecb8d 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
@@ -15,13 +15,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 
 abstract class ButtonStyle {
   const ButtonStyle({
     this.radius = 15,
     this.padding = 10,
-    this.borderColors,
-    this.backgroundColor,
+    this.backgroundColors,
     this.shadow = const BoxShadow(
       blurRadius: 30,
       offset: Offset(0, 5),
@@ -35,11 +35,8 @@ abstract class ButtonStyle {
   /// Padding and gaps of this card
   final double? padding;
 
-  /// Border gradient color (from left to right)
-  final List<Color>? borderColors;
-
-  /// Button background color
-  final Color? backgroundColor;
+  /// Button background gradient colors (from left to right)
+  final MultiColor? backgroundColors;
 
   /// Drop shadow
   final BoxShadow? shadow;
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
index e35b35b7..aca7e5a2 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
@@ -1,4 +1,3 @@
-// ignore_for_file: public_member_api_docs, sort_constructors_first
 // Copyright (C) 2023 WYATT GROUP
 // Please see the AUTHORS file for details.
 //
@@ -16,14 +15,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
 class FlatButtonStyle extends ButtonStyle {
   const FlatButtonStyle({
     super.radius = 15,
     super.padding = 10,
-    super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.shadow = const BoxShadow(
       blurRadius: 30,
       offset: Offset(0, 5),
@@ -35,16 +34,14 @@ class FlatButtonStyle extends ButtonStyle {
   FlatButtonStyle copyWith({
     double? radius,
     double? padding,
-    List<Color>? borderColors,
-    Color? backgroundColor,
+    MultiColor? backgroundColors,
     BoxShadow? shadow,
     double? stroke,
   }) =>
       FlatButtonStyle(
         radius: radius ?? this.radius,
         padding: padding ?? this.padding,
-        borderColors: borderColors ?? this.borderColors,
-        backgroundColor: backgroundColor ?? this.backgroundColor,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
         shadow: shadow ?? this.shadow,
       );
 }
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/outlined_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/outlined_button_style.dart
index f6babbed..7ba8de93 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/outlined_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/outlined_button_style.dart
@@ -1,4 +1,3 @@
-// ignore_for_file: public_member_api_docs, sort_constructors_first
 // Copyright (C) 2023 WYATT GROUP
 // Please see the AUTHORS file for details.
 //
@@ -16,22 +15,26 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
 class OutlinedButtonStyle extends ButtonStyle {
   const OutlinedButtonStyle({
     super.radius = 15,
     super.padding = 10,
-    super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.shadow = const BoxShadow(
       blurRadius: 30,
       offset: Offset(0, 5),
       color: Color.fromRGBO(0, 0, 0, 0.05),
     ),
+    this.borderColors,
     this.stroke = 2,
   });
 
+  /// Border colors (from left to right).
+  final MultiColor? borderColors;
+
   /// Stroke of the border
   final double? stroke;
 
@@ -39,8 +42,8 @@ class OutlinedButtonStyle extends ButtonStyle {
   OutlinedButtonStyle copyWith({
     double? radius,
     double? padding,
-    List<Color>? borderColors,
-    Color? backgroundColor,
+    MultiColor? borderColors,
+    MultiColor? backgroundColors,
     BoxShadow? shadow,
     double? stroke,
   }) =>
@@ -48,7 +51,7 @@ class OutlinedButtonStyle extends ButtonStyle {
         radius: radius ?? this.radius,
         padding: padding ?? this.padding,
         borderColors: borderColors ?? this.borderColors,
-        backgroundColor: backgroundColor ?? this.backgroundColor,
+        backgroundColors: backgroundColors ?? this.backgroundColors,
         shadow: shadow ?? this.shadow,
         stroke: stroke ?? this.stroke,
       );