diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
new file mode 100644
index 00000000..d9f6cede
--- /dev/null
+++ b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
@@ -0,0 +1,40 @@
+// 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/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class Buttons extends StatelessWidget {
+  const Buttons({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Buttons',
+            style: Theme.of(context)
+                .textTheme
+                .titleLarge,
+          ),
+          const Gap(20),
+          const FlatButton(
+            label: TextWrapper('text'),
+          ),
+        ],
+      );
+}
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart
new file mode 100644
index 00000000..654c0f72
--- /dev/null
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/buttons.dart
@@ -0,0 +1,17 @@
+// 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/>.
+
+export './flat_button/flat_button.dart';
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
new file mode 100644
index 00000000..3a231884
--- /dev/null
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
@@ -0,0 +1,101 @@
+// 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/material.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+
+part 'flat_button.g.dart';
+
+@ComponentCopyWithExtension()
+class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin {
+  const FlatButton({
+    super.prefix,
+    super.suffix,
+    super.label,
+    super.state,
+    super.radius,
+    super.padding,
+    super.borderColors,
+    super.backgroundColor,
+    super.shadow,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => ElevatedButton(
+        onPressed: () {},
+        style: ElevatedButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radius ?? 0),
+          ),
+          padding: const EdgeInsets.all(0),
+        ),
+        child: Ink(
+          decoration: BoxDecoration(
+            color: backgroundColor ??
+                Theme.of(context).buttonTheme.colorScheme?.onPrimary,
+            border: GradientBoxBorder(
+              gradient: LinearGradient(
+                colors: (borderColors != null && borderColors!.length >= 2)
+                    ? borderColors!
+                    : [
+                        // TODO(hpcl): change this
+                        Theme.of(context).cardColor,
+                        Theme.of(context).cardColor
+                      ],
+              ),
+              width: 1,
+            ),
+            boxShadow: [
+              if (shadow != null) ...[shadow!]
+            ],
+            borderRadius: BorderRadius.all(
+              Radius.circular(radius ?? 0),
+            ),
+          ),
+          child: Container(
+            constraints: const BoxConstraints(
+              minWidth: 88,
+              minHeight: 36,
+            ), // min sizes for Material buttons
+            alignment: Alignment.center,
+            child: Row(
+              children: [
+                prefix ?? const SizedBox.shrink(),
+                if (label != null) ...[
+                  Text(
+                    label!.text,
+                    style: label!.style ?? context.textTheme.titleLarge,
+                  ).toGradient(
+                    LinearGradientHelper.fromNullableColors(label!.gradient),
+                  ),
+                ],
+                const Text(
+                  'OK',
+                  textAlign: TextAlign.center,
+                ),
+                suffix ?? const SizedBox.shrink(),
+              ],
+            ),
+          ),
+        ),
+      );
+}
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart
new file mode 100644
index 00000000..d844da2f
--- /dev/null
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.g.dart
@@ -0,0 +1,55 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'flat_button.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
+  const $FlatButtonCWProxyImpl(this._value);
+  final FlatButton _value;
+  @override
+  FlatButton prefix(Widget? prefix) => this(prefix: prefix);
+  @override
+  FlatButton suffix(Widget? suffix) => this(suffix: suffix);
+  @override
+  FlatButton label(TextWrapper? label) => this(label: label);
+  @override
+  FlatButton state(ControlState? state) => this(state: state);
+  @override
+  FlatButton radius(double? radius) => this(radius: radius);
+  @override
+  FlatButton padding(double? padding) => this(padding: padding);
+  @override
+  FlatButton borderColors(List<Color>? borderColors) =>
+      this(borderColors: borderColors);
+  @override
+  FlatButton backgroundColor(Color? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  FlatButton shadow(BoxShadow? shadow) => this(shadow: shadow);
+  @override
+  FlatButton key(Key? key) => this(key: key);
+  @override
+  FlatButton call({
+    Widget? prefix,
+    Widget? suffix,
+    TextWrapper? label,
+    ControlState? state,
+    double? radius,
+    double? padding,
+    List<Color>? borderColors,
+    Color? backgroundColor,
+    BoxShadow? shadow,
+    Key? key,
+  }) =>
+      FlatButton(
+        key: key ?? _value.key,
+      );
+}
+
+mixin $FlatButtonCWMixin on Component {
+  $FlatButtonComponentCWProxy get copyWith =>
+      $FlatButtonCWProxyImpl(this as FlatButton);
+}
diff --git a/packages/wyatt_ui_kit/lib/src/components/components.dart b/packages/wyatt_ui_kit/lib/src/components/components.dart
index 75c4ba26..b696808e 100644
--- a/packages/wyatt_ui_kit/lib/src/components/components.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/components.dart
@@ -14,4 +14,5 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+export './buttons/buttons.dart';
 export './cards/cards.dart';