diff --git a/src/TextInput/TextInput.features.stories.tsx b/src/TextInput/TextInput.features.stories.tsx
index 765c6210551..e96846142d6 100644
--- a/src/TextInput/TextInput.features.stories.tsx
+++ b/src/TextInput/TextInput.features.stories.tsx
@@ -119,25 +119,24 @@ export const WithTrailingIcon = () => (
 )
 
 export const WithTrailingAction = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('Sample Text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
   }
+
   return (
     <Box as="form">
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
           trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
-              }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              sx={{color: 'fg.subtle'}}
-            />
+            <Box sx={{width: '30px', display: 'flex', alignItems: 'center'}}>
+              {/* TODO this behavior should ideally be baked into the component for actions like clear */}
+              {value.length > 0 && (
+                <TextInput.Action onClick={() => setValue('')} icon={XCircleFillIcon} aria-label="Clear input" />
+              )}
+            </Box>
           }
           value={value}
           onChange={handleChange}
@@ -148,26 +147,41 @@ export const WithTrailingAction = () => {
 }
 
 export const WithTooltipDirection = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('Sample Text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
   }
+
   return (
     <Box as="form">
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
           trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
+            <Box
+              sx={{
+                width: '30px',
+                display: 'flex',
+                alignItems: 'center',
               }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              tooltipDirection="nw"
-              sx={{color: 'fg.subtle'}}
-            />
+            >
+              {value.length > 0 && (
+                <TextInput.Action
+                  onClick={() => {
+                    setValue('')
+                  }}
+                  icon={XCircleFillIcon}
+                  aria-label="Clear input"
+                  tooltipDirection="nw"
+                  sx={{
+                    color: 'fg.muted',
+                    backgroundColor: 'transparent',
+                    '&:hover': {color: 'fg.subtle'},
+                  }}
+                />
+              )}
+            </Box>
           }
           value={value}
           onChange={handleChange}
diff --git a/src/internal/components/TextInputInnerAction.tsx b/src/internal/components/TextInputInnerAction.tsx
index 2e634651069..dd9cf702df7 100644
--- a/src/internal/components/TextInputInnerAction.tsx
+++ b/src/internal/components/TextInputInnerAction.tsx
@@ -31,6 +31,10 @@ const invisibleButtonStyleOverrides = {
   paddingLeft: '4px',
   position: 'relative',
 
+  backgroundColor: 'transparent',
+  color: 'fg.subtle',
+  '&:hover': {color: 'fg.muted'},
+
   '&[data-component="IconButton"]': {
     width: 'var(--inner-action-size)',
     height: 'var(--inner-action-size)',