🏷️ button interface added

src/components/button/IButton.type.ts

@@ -0,0 +1,75 @@
+import type { ButtonHTMLAttributes } from "vue"
+
+/**
+ * Interface representing the properties of a single button component.
+ */
+export default interface IButton {
+  /** Whether the button is disabled */
+  disabled?: boolean;
+
+  /** Text label displayed on the button */
+  label?: string;
+
+  /** Applies the secondary button style */
+  secondary?: boolean;
+
+  /** Applies the tertiary button style */
+  tertiary?: boolean;
+
+  /** Displays the icon on the right side of the button */
+  iconRight?: boolean;
+
+  /** Displays only the icon without any label */
+  iconOnly?: boolean;
+
+  /** Removes the default outline style */
+  noOutline?: boolean;
+
+  /** Applies a danger style to the button */
+  danger?: boolean;
+
+  /** Size of the button */
+  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined;
+
+  /** Name of the icon to display */
+  icon?: string;
+
+  /** Click event handler */
+  onClick?: ($event: MouseEvent) => void;
+
+  /** Tooltip or accessibility title for the button (required) */
+  title: string;
+}
+
+/**
+ * Interface representing a group of buttons with layout and style options.
+ */
+export default interface IButtonGroup {
+  /**
+   * Array of buttons to display in the group.
+   * Each button can include standard HTML button attributes.
+   */
+  buttons?: (IButton & ButtonHTMLAttributes)[];
+
+  /** Reverses the order of the buttons */
+  reverse?: boolean;
+
+  /** Makes all buttons in the group the same width */
+  equisized?: boolean;
+
+  /** Aligns icons to the right for all buttons */
+  iconRight?: boolean;
+
+  /** Alignment of the button group */
+  align?: 'right' | 'center' | '' | undefined;
+
+  /**
+   * Controls when the layout should switch to inline.
+   * Can be based on screen size or always/never.
+   */
+  inlineLayoutWhen?: 'always' | 'never' | 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | true | undefined;
+
+  /** Size of all buttons in the group */
+  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined;
+}
+