diff --git a/packages/tail-kit/src/components/button/button.test.tsx b/packages/tail-kit/src/components/button/button.test.tsx
index bc5d6fe7..75827f74 100644
--- a/packages/tail-kit/src/components/button/button.test.tsx
+++ b/packages/tail-kit/src/components/button/button.test.tsx
@@ -105,7 +105,7 @@ test('render icon after label when iconPlacement is afterText', () => {
test('render default disabled button correctly', () => {
render()
expect(screen.getByRole('button')).toHaveClass(
- 'border-gray-400 text-gray-400',
+ 'border-disabled text-disabled',
)
})
@@ -115,7 +115,9 @@ test('render primary disabled button correctly', () => {
Click Me
,
)
- expect(screen.getByRole('button')).toHaveClass('bg-gray-400 text-white')
+ expect(screen.getByRole('button')).toHaveClass(
+ 'bg-disabled text-text-inverse',
+ )
})
test('render danger disabled button correctly', () => {
@@ -125,7 +127,7 @@ test('render danger disabled button correctly', () => {
,
)
expect(screen.getByRole('button')).toHaveClass(
- 'border-gray-400 text-gray-400',
+ 'border-disabled text-disabled',
)
})
@@ -135,5 +137,5 @@ test('render link disabled button correctly', () => {
Click Me
,
)
- expect(screen.getByRole('button')).toHaveClass('text-gray-400')
+ expect(screen.getByRole('button')).toHaveClass('text-disabled')
})
diff --git a/packages/tail-kit/src/components/button/button.tsx b/packages/tail-kit/src/components/button/button.tsx
index 9a62855e..4b8d76d0 100644
--- a/packages/tail-kit/src/components/button/button.tsx
+++ b/packages/tail-kit/src/components/button/button.tsx
@@ -65,32 +65,32 @@ export const Button = forwardRef(
const buttonClassNames = useMemo(() => {
if (buttonType === 'default') {
if (disabled) {
- return 'border-gray-400 text-gray-400 default'
+ return 'border-disabled text-disabled default'
}
- return 'border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white default'
+ return 'border-primary text-primary hover:bg-primary hover:text-text-inverse default'
}
if (buttonType === 'primary') {
if (disabled) {
- return 'bg-gray-400 text-white border-transparent primary'
+ return 'bg-disabled text-text-inverse border-transparent primary'
}
- return 'bg-blue-600 text-white border-transparent primary'
+ return 'bg-primary text-text-inverse border-transparent primary'
}
if (buttonType === 'danger') {
if (disabled) {
- return 'border-gray-400 text-gray-400 danger'
+ return 'border-disabled text-disabled danger'
}
- return 'border-red-500 text-red-500 hover:bg-red-500 hover:text-white danger'
+ return 'border-error text-error hover:bg-error hover:text-text-inverse danger'
}
// if none of the above branches are satisfied, then the button is of type link
if (disabled) {
- return 'border-transparent text-gray-400 link'
+ return 'border-transparent text-disabled link'
}
- return 'border-transparent text-blue-600 link'
+ return 'border-transparent text-primary link'
}, [buttonType, disabled])
const iconComponent = loading ? (
@@ -103,7 +103,7 @@ export const Button = forwardRef(