diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
index c337501e059..0b0f014af0e 100644
--- a/src/app/components/account/account-list-item.layout.tsx
+++ b/src/app/components/account/account-list-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { Spinner } from '@app/ui/components/spinner';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface AccountListItemLayoutProps {
   accountAddresses: ReactNode;
@@ -29,7 +29,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
   } = props;
 
   return (
-    <ItemInteractive
+    <Pressable
       data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
       key={`account-${index}`}
       onClick={onSelectAccount}
@@ -47,6 +47,6 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
         }
         captionLeft={accountAddresses}
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
index fc140fd769d..597bdd7ac26 100644
--- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -5,9 +5,9 @@ import { createMoney } from '@shared/models/money.model';
 import { formatBalance } from '@app/common/format-balance';
 import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
 import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface Brc20TokenAssetItemLayoutProps {
   token: Brc20Token;
@@ -29,7 +29,7 @@ export function Brc20TokenAssetItemLayout({
       label="Not enough BTC in balance"
       side="top"
     >
-      <ItemInteractive onClick={onClick} my="space.02">
+      <Pressable onClick={onClick} my="space.02">
         <ItemLayout
           flagImg={<Brc20AvatarIcon />}
           titleLeft={token.ticker}
@@ -46,7 +46,7 @@ export function Brc20TokenAssetItemLayout({
             </BasicTooltip>
           }
         />
-      </ItemInteractive>
+      </Pressable>
     </BasicTooltip>
   );
 }
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index 6d8f0e40e8a..87f19679360 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -5,10 +5,10 @@ import { Flex, styled } from 'leather-styles/jsx';
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils';
 
@@ -36,7 +36,7 @@ export function CryptoCurrencyAssetItemLayout({
     parseCryptoCurrencyAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
+    <Pressable data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={icon}
         titleLeft={title}
@@ -69,6 +69,6 @@ export function CryptoCurrencyAssetItemLayout({
           )
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
index 50ab3468b3b..d3034ebd737 100644
--- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -3,9 +3,9 @@ import { styled } from 'leather-styles/jsx';
 import { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
 
 import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { parseStacksFungibleTokenAssetBalance } from './fungible-token-asset.utils';
 
@@ -21,7 +21,7 @@ export function StacksFungibleTokenAssetItemLayout({
     parseStacksFungibleTokenAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
+    <Pressable data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <StacksAssetAvatar
@@ -46,6 +46,6 @@ export function StacksFungibleTokenAssetItemLayout({
           </BasicTooltip>
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
index 38514a301cf..fbd50bd1d51 100644
--- a/src/app/components/transaction-item/transaction-item.layout.tsx
+++ b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { Caption } from '@app/ui/components/typography/caption';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
@@ -26,7 +26,7 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    <ItemInteractive onClick={openTxLink} my="space.02">
+    <Pressable onClick={openTxLink} my="space.02">
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
@@ -46,6 +46,6 @@ export function TransactionItemLayout({
           )
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
index 8985584ba17..2b9060b5c22 100644
--- a/src/app/pages/receive/components/receive-item.tsx
+++ b/src/app/pages/receive/components/receive-item.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@app/ui/components/button/button';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemWithButtonsLayout } from '@app/ui/components/item/item-with-buttons.layout';
+import { ItemLayoutWithButtons } from '@app/ui/components/item-layout/item-layout-with-buttons';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable } from '@app/ui/pressable/pressable';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 interface ReceiveItemProps {
@@ -23,8 +23,8 @@ export function ReceiveItem({
 }: ReceiveItemProps) {
   if (!address) return null;
   return (
-    <ItemInteractive my="space.02">
-      <ItemWithButtonsLayout
+    <Pressable my="space.02">
+      <ItemLayoutWithButtons
         flagImg={icon}
         title={title}
         caption={truncateMiddle(address, 6)}
@@ -46,6 +46,6 @@ export function ReceiveItem({
           </>
         }
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
index 4e4a5429d0d..ff3dedfd37d 100644
--- a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
+++ b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -4,8 +4,8 @@ import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
 import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
 import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { useAlexSdkBalanceAsFiat } from '../../hooks/use-alex-sdk-fiat-price';
 import { SwapAsset } from '../../hooks/use-swap-form';
@@ -23,11 +23,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
   const fallback = getAvatarFallback(asset.name);
 
   return (
-    <ItemInteractive
-      data-testid={SwapSelectors.ChooseAssetListItem}
-      onClick={onClick}
-      my="space.02"
-    >
+    <Pressable data-testid={SwapSelectors.ChooseAssetListItem} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <Avatar.Root>
@@ -40,6 +36,6 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
         titleRight={formatMoneyWithoutSymbol(asset.balance)}
         captionRight={balanceAsFiat}
       />
-    </ItemInteractive>
+    </Pressable>
   );
 }
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index e53cdf06634..1ba3e52013f 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -5,9 +5,9 @@ import { css } from 'leather-styles/css';
 import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
 import { ChevronDownIcon } from '@app/ui/icons';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
 import { Flag } from '../flag/flag';
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
 
 export interface DropdownMenuItem {
   iconLeft?: ReactNode;
@@ -77,7 +77,7 @@ const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => (
   <styled.div className={dropdownItemStyles}>
     <RadixDropdownMenu.Item
       ref={ref}
-      className={css(itemBaseStyles, itemInteractiveStyles)}
+      className={css(pressableBaseStyles, pressableStyles)}
       {...props}
     />
   </styled.div>
diff --git a/src/app/ui/components/item/item-with-buttons.layout.tsx b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx
similarity index 82%
rename from src/app/ui/components/item/item-with-buttons.layout.tsx
rename to src/app/ui/components/item-layout/item-layout-with-buttons.tsx
index af00349f3f8..dd610fbf398 100644
--- a/src/app/ui/components/item/item-with-buttons.layout.tsx
+++ b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx
@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 
 import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { pressableCaptionStyles } from '@app/ui/pressable/pressable';
+
 import { Flag } from '../flag/flag';
-import { itemCaptionStyles } from './item-interactive';
 
 interface ItemWithButtonsLayoutProps {
   buttons: ReactNode;
@@ -11,7 +12,7 @@ interface ItemWithButtonsLayoutProps {
   flagImg: ReactNode;
   title: string;
 }
-export function ItemWithButtonsLayout({
+export function ItemLayoutWithButtons({
   buttons,
   caption,
   flagImg,
@@ -31,7 +32,7 @@ export function ItemWithButtonsLayout({
           <styled.span fontWeight={500} textStyle="label.02">
             {title}
           </styled.span>
-          <styled.span className={itemCaptionStyles} textStyle="caption.01">
+          <styled.span className={pressableCaptionStyles} textStyle="caption.01">
             {caption}
           </styled.span>
         </Stack>
diff --git a/src/app/ui/components/item/item.stories.tsx b/src/app/ui/components/item-layout/item-layout.stories.tsx
similarity index 93%
rename from src/app/ui/components/item/item.stories.tsx
rename to src/app/ui/components/item-layout/item-layout.stories.tsx
index d510c152ec1..7b43d5f8ec3 100644
--- a/src/app/ui/components/item/item.stories.tsx
+++ b/src/app/ui/components/item-layout/item-layout.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Box, Circle } from 'leather-styles/jsx';
 
-import { ItemLayout as Component } from './item.layout';
+import { ItemLayout as Component } from './item-layout';
 
 const meta: Meta<typeof Component> = {
   component: Component,
diff --git a/src/app/ui/components/item/item.layout.tsx b/src/app/ui/components/item-layout/item-layout.tsx
similarity index 83%
rename from src/app/ui/components/item/item.layout.tsx
rename to src/app/ui/components/item-layout/item-layout.tsx
index 236e96144c7..9080292d5e3 100644
--- a/src/app/ui/components/item/item.layout.tsx
+++ b/src/app/ui/components/item-layout/item-layout.tsx
@@ -2,10 +2,11 @@ import { ReactNode, isValidElement } from 'react';
 
 import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable';
+
 import { CheckmarkIcon } from '../../icons/checkmark-icon';
 import { ChevronUpIcon } from '../../icons/chevron-up-icon';
 import { Flag } from '../flag/flag';
-import { itemCaptionStyles, itemChevronStyles } from './item-interactive';
 
 interface ItemLayoutProps {
   captionLeft: ReactNode;
@@ -50,7 +51,7 @@ export function ItemLayout({
           {isValidElement(captionLeft) ? (
             captionLeft
           ) : (
-            <styled.span className={itemCaptionStyles} textStyle="caption.01">
+            <styled.span className={pressableCaptionStyles} textStyle="caption.01">
               {captionLeft}
             </styled.span>
           )}
@@ -67,13 +68,17 @@ export function ItemLayout({
             {isValidElement(captionRight) ? (
               captionRight
             ) : (
-              <styled.span className={itemCaptionStyles} textStyle="caption.02">
+              <styled.span className={pressableCaptionStyles} textStyle="caption.02">
                 {captionRight}
               </styled.span>
             )}
           </Stack>
           {showChevron && (
-            <ChevronUpIcon color={itemChevronStyles} transform="rotate(90deg)" variant="small" />
+            <ChevronUpIcon
+              color={pressableChevronStyles}
+              transform="rotate(90deg)"
+              variant="small"
+            />
           )}
         </HStack>
       </Flex>
diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
index c0b89e58d67..28671f15d1d 100644
--- a/src/app/ui/components/select/select.tsx
+++ b/src/app/ui/components/select/select.tsx
@@ -3,7 +3,7 @@ import { ReactNode, forwardRef } from 'react';
 import * as RadixSelect from '@radix-ui/react-select';
 import { css } from 'leather-styles/css';
 
-import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
+import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
 export interface SelectItem {
   iconLeft?: ReactNode;
@@ -74,7 +74,7 @@ const Label: typeof RadixSelect.Label = forwardRef((props, ref) => (
 ));
 
 const Item: typeof RadixSelect.Item = forwardRef((props, ref) => (
-  <RadixSelect.Item className={css(itemBaseStyles, itemInteractiveStyles)} ref={ref} {...props} />
+  <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
 ));
 
 const selectSeparatorStyles = css({
diff --git a/src/app/ui/components/item/item-interactive.stories.tsx b/src/app/ui/pressable/pressable.stories.tsx
similarity index 88%
rename from src/app/ui/components/item/item-interactive.stories.tsx
rename to src/app/ui/pressable/pressable.stories.tsx
index 556c8544c16..c9381210117 100644
--- a/src/app/ui/components/item/item-interactive.stories.tsx
+++ b/src/app/ui/pressable/pressable.stories.tsx
@@ -4,16 +4,16 @@ import { styled } from 'leather-styles/jsx';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { QrCodeIcon } from '@app/ui/icons/qr-code-icon';
+import { Pressable as Component } from '@app/ui/pressable/pressable';
 
-import { Button } from '../button/button';
-import { ItemInteractive as Component } from './item-interactive';
-import { ItemWithButtonsLayout } from './item-with-buttons.layout';
-import { ItemLayout } from './item.layout';
+import { Button } from '../components/button/button';
+import { ItemLayout } from '../components/item-layout/item-layout';
+import { ItemLayoutWithButtons } from '../components/item-layout/item-layout-with-buttons';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'ItemInteractive',
+  title: 'Pressable',
   parameters: {
     controls: { include: [] },
   },
@@ -35,7 +35,7 @@ function ExampleInteractiveItemContent() {
   );
 }
 
-export const ItemInteractive: Story = {
+export const Pressable: Story = {
   parameters: {
     docs: {
       description: {
@@ -70,7 +70,7 @@ export const Disabled: Story = {
 export const WithButtons: Story = {
   args: {
     children: (
-      <ItemWithButtonsLayout
+      <ItemLayoutWithButtons
         flagImg={<BtcAvatarIcon />}
         title="Label"
         caption="Caption"
diff --git a/src/app/ui/components/item/item-interactive.tsx b/src/app/ui/pressable/pressable.tsx
similarity index 64%
rename from src/app/ui/components/item/item-interactive.tsx
rename to src/app/ui/pressable/pressable.tsx
index 3a7d18d2664..ef581e892ad 100644
--- a/src/app/ui/components/item/item-interactive.tsx
+++ b/src/app/ui/pressable/pressable.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import { type RecipeVariantProps, css, cva } from 'leather-styles/css';
-import { Box, BoxProps } from 'leather-styles/jsx';
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
 import { isDefined } from '@shared/utils';
 
@@ -24,7 +24,7 @@ const focusVisibleStyles = {
   _focusWithin: { outline: 'none' },
 };
 
-export const itemBaseStyles = css.raw({
+export const pressableBaseStyles = css.raw({
   position: 'relative',
   bg: 'ink.background-primary',
   color: 'ink.text-primary',
@@ -37,7 +37,7 @@ export const itemBaseStyles = css.raw({
   width: '100%',
 });
 
-export const itemInteractiveStyles = css.raw({
+export const pressableStyles = css.raw({
   cursor: 'pointer',
   position: 'relative',
   _before: basePseudoOutlineProps,
@@ -66,41 +66,41 @@ export const itemInteractiveStyles = css.raw({
   },
 });
 
-const itemRecipe = cva({
-  base: itemBaseStyles,
+const pressableRecipe = cva({
+  base: pressableBaseStyles,
   variants: {
     disabled: { true: {} },
-    interactive: {
-      true: itemInteractiveStyles,
+    pressable: {
+      true: pressableStyles,
     },
   },
 });
 
-export const itemCaptionStyles = css({
+export const pressableCaptionStyles = css({
   _groupDisabled: { color: 'ink.non-interactive' },
   color: 'ink.text-subdued',
 });
 
-export const itemChevronStyles = css({
+export const pressableChevronStyles = css({
   _groupDisabled: { color: 'ink.non-interactive' },
   color: 'ink.action-primary-default',
 });
 
-type ItemVariantProps = RecipeVariantProps<typeof itemRecipe>;
+type PressableVariantProps = RecipeVariantProps<typeof pressableRecipe>;
 
-export const ItemInteractive = forwardRef<HTMLDivElement, BoxProps & ItemVariantProps>(
-  (props, ref) => {
-    const { disabled, onClick, ...rest } = props;
-    const isInteractive = isDefined(onClick);
-    return (
-      <Box
-        className={`group ${itemRecipe({ interactive: isInteractive })}`}
-        data-disabled={disabled}
-        onClick={isInteractive ? onClick : undefined}
-        ref={ref}
-        tabIndex={0}
-        {...rest}
-      />
-    );
-  }
-);
+export const Pressable = forwardRef<
+  HTMLButtonElement,
+  HTMLStyledProps<'button'> & PressableVariantProps
+>((props, ref) => {
+  const { disabled, onClick, ...rest } = props;
+  const isPressable = isDefined(onClick);
+  return (
+    <styled.button
+      className={`group ${pressableRecipe({ pressable: isPressable })}`}
+      data-disabled={disabled}
+      onClick={isPressable ? onClick : undefined}
+      ref={ref}
+      {...rest}
+    />
+  );
+});