Implemented Button with example

example/lib/main.dart

@@ -1,6 +1,6 @@
-import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:tarka_ui/tarka_ui.dart';
+import 'symbol.dart';
 
 void main() {
   runApp(const MyApp());
@@ -47,34 +47,39 @@ class _HomePageState extends State<HomePage> {
           const Text("Button6", style: TKTextStyle.button6),
           const Text("Button7", style: TKTextStyle.button7),
           const Text("Button8", style: TKTextStyle.button8),
+          const SizedBox(height: 8),
           TKButton(
             label: "Primary Button",
-            icon: FluentIcons.circle_12_filled,
-            tButtonType: TKButtonType.primary,
+            type: TKButtonType.primary,
+            size: TKButtonSize.xs,
             onPressed: () {},
           ),
           TKButton(
             label: "Secondary Button",
-            icon: FluentIcons.circle_12_filled,
-            tButtonType: TKButtonType.secondary,
+            icon: Symbol.chevronDown.value,
+            type: TKButtonType.secondary,
+            size: TKButtonSize.s,
+            iconAlignment: TKButtonIconAlignment.right,
             onPressed: () {},
           ),
           TKButton(
             label: "Outlined Button",
-            icon: FluentIcons.circle_12_filled,
-            tButtonType: TKButtonType.outlined,
+            icon: Symbol.chevronDown.value,
+            type: TKButtonType.outlined,
+            size: TKButtonSize.m,
             onPressed: () {},
           ),
           TKButton(
             label: "Ghost Button",
-            icon: FluentIcons.circle_12_filled,
-            tButtonType: TKButtonType.ghost,
+            icon: Symbol.chevronDown.value,
+            type: TKButtonType.ghost,
             onPressed: () {},
           ),
           TKButton(
             label: "Danger Button",
-            icon: FluentIcons.circle_12_filled,
-            tButtonType: TKButtonType.danger,
+            icon: Symbol.chevronDown.value,
+            type: TKButtonType.danger,
+            size: TKButtonSize.l,
             onPressed: () {},
           )
         ]));

example/lib/symbol.dart

@@ -0,0 +1,28 @@
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
+import 'package:flutter/material.dart';
+
+enum Symbol {
+  chevronDown(FluentIcons.chevron_down_48_regular),
+  chevronRight(FluentIcons.chevron_right_48_regular),
+  chevronLeft(FluentIcons.chevron_left_48_regular),
+  checkmarkStarburst(FluentIcons.checkmark_starburst_24_regular),
+  copy(FluentIcons.copy_32_regular),
+  delete(FluentIcons.delete_48_regular),
+  dismiss(FluentIcons.dismiss_48_regular),
+  document(FluentIcons.document_48_regular),
+  documentDownload(FluentIcons.document_header_arrow_down_24_regular),
+  documentError(FluentIcons.document_error_24_regular),
+  export(FluentIcons.arrow_export_up_24_regular),
+  map(FluentIcons.map_24_regular),
+  questionCircle(FluentIcons.question_circle_48_regular),
+  refresh(FluentIcons.arrow_counterclockwise_48_regular),
+  reorderDots(FluentIcons.re_order_dots_vertical_24_regular),
+  search(FluentIcons.search_48_regular),
+  shield(FluentIcons.shield_48_regular),
+  sync(FluentIcons.arrow_sync_circle_24_regular),
+  tabs(FluentIcons.tabs_24_regular);
+
+  final IconData value;
+
+  const Symbol(this.value);
+}

lib/components/button/tk_button.dart

@@ -1,20 +1,40 @@
 import 'package:flutter/material.dart';
 import 'package:tarka_ui/styles/tk_colors.dart';
+import 'package:tarka_ui/styles/tk_text_style.dart';
 
+/// TKButtonType is used to define the type of button.
 enum TKButtonType { primary, secondary, outlined, ghost, danger }
+/// TKButtonSize is used to define the size of button.
+enum TKButtonSize { xs, s, m, l }
+/// TKButtonIconAlignment is used to define the alignment of icon in button.
+enum TKButtonIconAlignment { left, right, none }
 
+/// TKButton is used to create a button with different types, sizes and icon alignment.
 class TKButton extends StatelessWidget {
   final String? label;
+  final TKButtonType type;
+  final TKButtonSize size;
   final IconData? icon;
-  final TKButtonType tButtonType;
-  final VoidCallback? onPressed;
+  final TKButtonIconAlignment iconAlignment;
+  final Color? foregroundColor;
+  final Color? backgroundColor;
+  final Color? borderSideColor;
+  final void Function()? onPressed;
+  final void Function()? onLongPressed;
 
+  /// Creates a button with the given [label] and [icon].
   const TKButton({
     super.key,
     required this.label,
-    required this.icon,
-    required this.tButtonType,
+    this.type = TKButtonType.primary,
+    this.size = TKButtonSize.m,
+    this.icon,
+    this.iconAlignment = TKButtonIconAlignment.none,
+    this.foregroundColor,
+    this.backgroundColor,
+    this.borderSideColor,
     this.onPressed,
+    this.onLongPressed,
   }) : assert(
           label != null || icon != null,
           'Label or icon must be provided.',
@@ -25,43 +45,156 @@ class TKButton extends StatelessWidget {
     final child = Row(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        if (icon != null) Icon(icon, size: 18.0),
-        if (icon != null && label != null) const SizedBox(width: 8),
-        if (label != null) Text(label!, textAlign: TextAlign.center),
-      ],
+      children: getIconAndLabel(),
     );
-    switch (tButtonType) {
+    switch (type) {
       case TKButtonType.primary:
         return TextButton(
-          style: TextButton.styleFrom(backgroundColor: TKColors.primary,foregroundColor:TKColors.onPrimary ),
+          style: TextButton.styleFrom(
+              minimumSize: getSize(),
+              backgroundColor: backgroundColor ?? getBackgroundColor(),
+              foregroundColor: foregroundColor ?? getForegroundColor(),
+              textStyle: getTextStyle(),
+              shape: const StadiumBorder()),
           onPressed: onPressed,
+          onLongPress: onLongPressed,
           child: child,
         );
       case TKButtonType.secondary:
         return TextButton(
-          style: TextButton.styleFrom(backgroundColor: TKColors.secondary,foregroundColor: TKColors.onSecondary),
+          style: TextButton.styleFrom(
+              minimumSize: getSize(),
+              backgroundColor: backgroundColor ?? getBackgroundColor(),
+              foregroundColor: foregroundColor ?? getForegroundColor(),
+              textStyle: getTextStyle(),
+              shape: const StadiumBorder()),
           onPressed: onPressed,
+          onLongPress: onLongPressed,
           child: child,
         );
       case TKButtonType.outlined:
         return OutlinedButton(
-          style: OutlinedButton.styleFrom(foregroundColor: TKColors.onSurface),
+          style: OutlinedButton.styleFrom(
+              minimumSize: getSize(),
+              backgroundColor: backgroundColor ?? getBackgroundColor(),
+              foregroundColor: foregroundColor ?? getForegroundColor(),
+              textStyle: getTextStyle(),
+              shape: const StadiumBorder(),
+              side: BorderSide(color: borderSideColor ?? TKColors.onSurface)),
           onPressed: onPressed,
+          onLongPress: onLongPressed,
           child: child,
         );
       case TKButtonType.ghost:
         return TextButton(
-          style: TextButton.styleFrom(backgroundColor: TKColors.transparent,foregroundColor: TKColors.secondary),
+          style: TextButton.styleFrom(
+              minimumSize: getSize(),
+              backgroundColor: backgroundColor ?? getBackgroundColor(),
+              foregroundColor: foregroundColor ?? getForegroundColor(),
+              textStyle: getTextStyle(),
+              shape: const StadiumBorder()),
           onPressed: onPressed,
+          onLongPress: onLongPressed,
           child: child,
         );
       case TKButtonType.danger:
         return TextButton(
-          style: TextButton.styleFrom(backgroundColor: TKColors.error,foregroundColor: TKColors.onPrimary),
+          style: TextButton.styleFrom(
+              minimumSize: getSize(),
+              backgroundColor: backgroundColor ?? getBackgroundColor(),
+              foregroundColor: foregroundColor ?? getForegroundColor(),
+              textStyle: getTextStyle(),
+              shape: const StadiumBorder()),
           onPressed: onPressed,
+          onLongPress: onLongPressed,
           child: child,
         );
     }
   }
+
+  getIconAndLabel() {
+    switch (iconAlignment) {
+      case TKButtonIconAlignment.left:
+      case TKButtonIconAlignment.none:
+        return [
+          if (icon != null) Icon(icon, size: getIconSize()),
+          if (icon != null && label != null) const SizedBox(width: 8),
+          if (label != null) Text(label!, textAlign: TextAlign.center),
+        ];
+
+      case TKButtonIconAlignment.right:
+        return [
+          if (label != null) Text(label!, textAlign: TextAlign.center),
+          if (icon != null && label != null) const SizedBox(width: 8),
+          if (icon != null) Icon(icon, size: getIconSize()),
+        ];
+      default:
+    }
+  }
+
+  Color getForegroundColor() {
+    switch (type) {
+      case TKButtonType.primary:
+        return TKColors.onPrimary;
+      case TKButtonType.secondary:
+        return TKColors.onSecondary;
+      case TKButtonType.outlined:
+        return TKColors.onSurface;
+      case TKButtonType.ghost:
+        return TKColors.secondary;
+      case TKButtonType.danger:
+        return TKColors.onPrimary;
+    }
+  }
+
+  Color getBackgroundColor() {
+    switch (type) {
+      case TKButtonType.primary:
+        return TKColors.primary;
+      case TKButtonType.secondary:
+        return TKColors.secondary;
+      case TKButtonType.outlined:
+        return TKColors.surfaceHover;
+      case TKButtonType.ghost:
+        return TKColors.transparent;
+      case TKButtonType.danger:
+        return TKColors.error;
+    }
+  }
+
+  double getIconSize() {
+    switch (size) {
+      case TKButtonSize.xs:
+      case TKButtonSize.s:
+        return 12;
+      case TKButtonSize.m:
+      case TKButtonSize.l:
+        return 18;
+    }
+  }
+
+  Size getSize() {
+    switch (size) {
+      case TKButtonSize.xs:
+        return const Size.fromHeight(24);
+      case TKButtonSize.s:
+        return const Size.fromHeight(32);
+      case TKButtonSize.m:
+        return const Size.fromHeight(40);
+      case TKButtonSize.l:
+        return const Size.fromHeight(48);
+    }
+  }
+
+  TextStyle getTextStyle() {
+    switch (size) {
+      case TKButtonSize.xs:
+        return TKTextStyle.button8;
+      case TKButtonSize.s:
+        return TKTextStyle.button7;
+      case TKButtonSize.m:
+      case TKButtonSize.l:
+        return TKTextStyle.button6;
+    }
+  }
 }

lib/styles/tk_symbols.dart

@@ -1,6 +1,12 @@
+import 'package:flutter/material.dart';
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 
-class TKSymbols{
-  TKSymbols._();
+class TKSymbol {
+  TKSymbol._();
 
-
-}
+  static const IconData chevronDown = FluentIcons.chevron_down_48_regular;
+  static const IconData chevronRight = FluentIcons.chevron_right_48_regular;
+  static const IconData chevronLeft = FluentIcons.chevron_left_48_regular;
+  static const IconData reorderDots =
+      FluentIcons.re_order_dots_vertical_24_regular;
+}

lib/tarka_ui.dart

@@ -3,5 +3,4 @@ library tarka_ui;
 // exports component
 export 'package:tarka_ui/styles/tk_colors.dart';
 export 'package:tarka_ui/styles/tk_text_style.dart';
-export 'package:tarka_ui/styles/tk_symbols.dart';
 export 'package:tarka_ui/components/button/tk_button.dart';