diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
index e2a32c72b4d6..9032de7ea8d5 100644
--- a/components/src/atoms/buttons/RadioButton.tsx
+++ b/components/src/atoms/buttons/RadioButton.tsx
@@ -13,7 +13,6 @@ import {
RESPONSIVENESS,
SPACING,
StyledText,
- TYPOGRAPHY,
} from '../..'
import type { IconName } from '../..'
import type { StyleProps } from '../../primitives'
@@ -83,7 +82,15 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
const DISABLED_BUTTON_STYLE = css`
background-color: ${COLORS.grey35};
color: ${COLORS.grey50};
- cursor: ${CURSOR_NOT_ALLOWED};
+
+ &:hover,
+ &:active {
+ background-color: ${COLORS.grey35};
+ }
+
+ @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+ cursor: ${CURSOR_NOT_ALLOWED};
+ }
`
const SettingButtonLabel = styled.label`
@@ -113,6 +120,14 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
}
`
+ const SubButtonLabelStyle = css`
+ color: ${disabled
+ ? COLORS.grey50
+ : isSelected
+ ? COLORS.white
+ : COLORS.grey60};
+ `
+
return (
{buttonLabel}
@@ -164,8 +181,9 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
{subButtonLabel != null ? (
{subButtonLabel}