u Context Tag

packages/components/src/context-tag/context-tag.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof ContextTag> = {
   component: ContextTag,
   argTypes: {
     type: [
-      'default',
+      'user',
       'account',
       'group',
       'community',
@@ -29,10 +29,10 @@ const meta: Meta<typeof ContextTag> = {
 
 type Story = StoryObj<typeof ContextTag>
 
-export const Default: Story = {
+export const user: Story = {
   args: {
     type: 'account',
-    user: { name: 'user name ', emoji: '🐷' },
+    account: { name: 'user name ', emoji: '🐷' },
     size: 24,
     outline: false,
     blur: false,
@@ -43,10 +43,86 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -96,7 +172,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -122,7 +198,7 @@ export const AllVariants: Story = {
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -172,7 +248,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -197,10 +273,95 @@ export const AllVariants: Story = {
         </Stack>
       </Stack>
 
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} outline />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+            outline
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} outline />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -256,7 +417,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -285,7 +446,7 @@ export const AllVariants: Story = {
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -341,7 +502,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -369,10 +530,95 @@ export const AllVariants: Story = {
         </Stack>
       </Stack>
 
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} blur />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+            blur
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} blur />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -428,7 +674,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -457,7 +703,7 @@ export const AllVariants: Story = {
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -513,7 +759,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}

packages/components/src/context-tag/context-tag.tsx

@@ -1,3 +1,5 @@
+import { cloneElement } from 'react'
+
 import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'
 import { View } from 'react-native'
@@ -5,16 +7,17 @@ import { View } from 'react-native'
 import { Avatar } from '../avatar'
 import { Text } from '../text'
 
+import type { AvatarProps } from '../avatar'
 import type { TextProps } from '../text'
+import type { IconProps } from '@status-im/icons'
 
 type Props = {
-  children?: React.ReactNode
+  size?: 20 | 24 | 32
-  size?: 24 | 32
   blur?: boolean
   outline?: boolean
 } & (
-  | { type: 'default'; user: { name: string; src: string } }
+  | { type: 'user'; user: { name: string; src: string } }
-  | { type: 'account'; user: { name: string; emoji: string } }
+  | { type: 'account'; account: { name: string; emoji: string } }
   | {
       type: 'group'
       group: {
@@ -33,16 +36,28 @@ type Props = {
   | { type: 'address'; address: string }
   | { type: 'icon'; icon: React.ReactElement; label: string }
   | { type: 'audio'; audioLength: string }
+  | { type: 'label'; children: string }
 )
 
 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
   '32': 15,
-  '24': 13,
+  '24': 15,
+  '20': 13,
 }
 
-const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
+const avatarSizes: Record<
+  NonNullable<Props['size']>,
+  Extract<AvatarProps['size'], 28 | 20 | 16>
+> = {
   '32': 28,
   '24': 20,
+  '20': 16,
+}
+
+const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
+  '32': 20,
+  '24': 12,
+  '20': 12,
 }
 
 const Label = ({
@@ -51,7 +66,7 @@ const Label = ({
   type = 'default',
 }: {
   children: string
-  size: 24 | 32
+  size: 20 | 24 | 32
   type?: 'default' | 'monospace'
 }) => (
   <Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
@@ -63,11 +78,11 @@ const ContextTag = (props: Props) => {
   const { size = 24, blur = false, outline, type } = props
 
   const rounded = type === 'account' || type === 'collectible'
-  const hasAvatar = type !== 'address'
+  const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
 
   const renderContent = () => {
     switch (type) {
-      case 'default': {
+      case 'user': {
         return (
           <>
             <Avatar
@@ -150,9 +165,9 @@ const ContextTag = (props: Props) => {
             <Avatar
               type="account"
               size={avatarSizes[size]}
-              name={props.user.emoji}
+              name={props.account.emoji}
             />
-            <Label size={size}>{props.user.name}</Label>
+            <Label size={size}>{props.account.name}</Label>
           </>
         )
       }
@@ -199,17 +214,17 @@ const ContextTag = (props: Props) => {
       case 'icon': {
         return (
           <>
-            <Avatar
+            {cloneElement(props.icon, {
-              type="icon"
+              size: iconSizes[size],
-              size={avatarSizes[size]}
+              color: '$neutral-50',
-              icon={props.icon}
+            })}
-              backgroundColor="$transparent"
-              color="$neutral-50"
-            />
             <Label size={size}>{props.label}</Label>
           </>
         )
       }
+      case 'label': {
+        return <Label size={size}>{props.children}</Label>
+      }
     }
   }
 
@@ -219,8 +234,7 @@ const ContextTag = (props: Props) => {
       blur={blur}
       borderRadius={rounded ? '$8' : '$full'}
       size={size}
-      paddingVertical={hasAvatar ? 0 : 1}
+      {...(hasAvatar && { paddingLeft: 1 })}
-      paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
     >
       {renderContent()}
     </Base>
@@ -257,6 +271,11 @@ const Base = styled(View, {
       },
     },
     size: {
+      20: {
+        height: 20,
+        gap: 4,
+        paddingHorizontal: 6,
+      },
       24: {
         height: 24,
         gap: 4,