feat: add gain responsive

src/components/Button/Button.css

@@ -0,0 +1,80 @@
+.btn {
+  width: auto;
+  height: 36px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    opacity var(--dur-base) var(--ease-standard);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.btn-primary {
+  background: var(--accent-brand);
+  color: #0d0f12;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6f9bf2;
+}
+
+/* Ghost */
+.btn-ghost {
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-ghost:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+/* Toggle */
+.btn-toggle {
+  width: 90%;
+  height: 40px;
+  margin: 8px auto;
+  padding: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--radius-sm);
+
+  /* same as ghost */
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-toggle:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+  background: transparent;
+}
+
+/* Active states only */
+.btn-toggle.active-warning {
+  background: var(--accent-connecting);
+  border-color: var(--accent-connecting);
+  color: var(--bg-void);
+}
+
+.btn-toggle.active-danger {
+  background: var(--accent-down);
+  border-color: var(--accent-down);
+  color: var(--text-primary);
+}

src/components/Button/Button.tsx

@@ -0,0 +1,32 @@
+import './Button.css';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'ghost' | 'toggle' | 'outline';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Button({
+  variant = 'primary',
+  children,
+  className = '',
+  disabled,
+  onClick,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`btn btn-${variant} ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}