diff --git a/web/app/components/base/action-button/index.spec.tsx b/web/app/components/base/action-button/index.spec.tsx
new file mode 100644
index 0000000000..76c8eebda0
--- /dev/null
+++ b/web/app/components/base/action-button/index.spec.tsx
@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react'
+import { ActionButton, ActionButtonState } from './index'
+
+describe('ActionButton', () => {
+  test('renders button with default props', () => {
+    render(<ActionButton>Click me</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Click me' })
+    expect(button).toBeInTheDocument()
+    expect(button.classList.contains('action-btn')).toBe(true)
+    expect(button.classList.contains('action-btn-m')).toBe(true)
+  })
+
+  test('renders button with xs size', () => {
+    render(<ActionButton size='xs'>Small Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Small Button' })
+    expect(button.classList.contains('action-btn-xs')).toBe(true)
+  })
+
+  test('renders button with l size', () => {
+    render(<ActionButton size='l'>Large Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Large Button' })
+    expect(button.classList.contains('action-btn-l')).toBe(true)
+  })
+
+  test('renders button with xl size', () => {
+    render(<ActionButton size='xl'>Extra Large Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Extra Large Button' })
+    expect(button.classList.contains('action-btn-xl')).toBe(true)
+  })
+
+  test('applies correct state classes', () => {
+    const { rerender } = render(
+      <ActionButton state={ActionButtonState.Destructive}>Destructive</ActionButton>,
+    )
+    let button = screen.getByRole('button', { name: 'Destructive' })
+    expect(button.classList.contains('action-btn-destructive')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Active}>Active</ActionButton>)
+    button = screen.getByRole('button', { name: 'Active' })
+    expect(button.classList.contains('action-btn-active')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Disabled}>Disabled</ActionButton>)
+    button = screen.getByRole('button', { name: 'Disabled' })
+    expect(button.classList.contains('action-btn-disabled')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Hover}>Hover</ActionButton>)
+    button = screen.getByRole('button', { name: 'Hover' })
+    expect(button.classList.contains('action-btn-hover')).toBe(true)
+  })
+
+  test('applies custom className', () => {
+    render(<ActionButton className='custom-class'>Custom Class</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Custom Class' })
+    expect(button.classList.contains('custom-class')).toBe(true)
+  })
+
+  test('applies custom style', () => {
+    render(
+      <ActionButton styleCss={{ color: 'red', backgroundColor: 'blue' }}>
+        Custom Style
+      </ActionButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Custom Style' })
+    expect(button).toHaveStyle({
+      color: 'red',
+      backgroundColor: 'blue',
+    })
+  })
+
+  test('forwards additional button props', () => {
+    render(<ActionButton disabled data-testid='test-button'>Disabled Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Disabled Button' })
+    expect(button).toBeDisabled()
+    expect(button).toHaveAttribute('data-testid', 'test-button')
+  })
+})