chore: aligning descriptions

MetaMask · georgewrmarshall · Jul 18, 2025 · Jul 18, 2025 · Jul 21, 2025 · Jul 21, 2025
commit 382b4e42d7f8ed743aaef7846581c6fcec3951e1
@@ -1,6 +1,6 @@
 # AvatarAccount
 
-AvatarAccount is used to render account avatars within an interface.
+Avatar reserved for representing accounts inside of an avatar.
 
 ```tsx
 import { AvatarAccount } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarBase
 
-AvatarBase is used to render base avatar elements within an interface.
+AvatarBase is the base component for avatars.
 
 ```tsx
 import { AvatarBase } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarFavicon
 
-AvatarFavicon is used to render favicon avatars within an interface.
+Avatar reserved for representing websites and dapps.
 
 ```tsx
 import { AvatarFavicon } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarGroup
 
-AvatarGroup is used to render a group of avatars within an interface.
+AvatarGroup is a stacked avatars to represent a group of avatars.
 
 ```tsx
 import { AvatarGroup } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarIcon
 
-AvatarIcon is used to render icon avatars within an interface.
+Avatar reserved for representing static icons inside of an avatar.
 
 ```tsx
 import { AvatarIcon } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarNetwork
 
-AvatarNetwork is used to render network avatars within an interface.
+Avatar reserved for representing networks.
 
 ```tsx
 import { AvatarNetwork } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # AvatarToken
 
-AvatarToken is used to render token avatars within an interface.
+Avatar reserved for representing tokens.
 
 ```tsx
 import { AvatarToken } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # BadgeCount
 
-BadgeCount is used to render count badges within an interface.
+BadgeCount is a numeric indicator of unread messages or notifications on an app or UI element.
 
 ```tsx
 import { BadgeCount } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # BadgeIcon
 
-BadgeIcon is used to render icon badges within an interface.
+BadgeIcon is a circular indicator that contains an icon, used to provide quick context or visual tagging at a glance.
 
 ```tsx
 import { BadgeIcon } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # BadgeNetwork
 
-BadgeNetwork is used to render network badges within an interface.
+BadgeNetwork indicates the network an entity is connected to.
 
 ```tsx
 import { BadgeNetwork } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # BadgeStatus
 
-BadgeStatus is used to render status badges within an interface.
+BadgeStatus indicates the state of an item through color.
 
 ```tsx
 import { BadgeStatus } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # BadgeWrapper
 
-BadgeWrapper is used to wrap components with a badge indicator within an interface.
+BadgeWrapper positions a badge on top of another element.
 
 ```tsx
 import { BadgeWrapper } from '@metamask/design-system-react-native';

@@ -1,6 +1,6 @@
 # Box
 
-Box is used to render flexible container elements within an interface.
+Box is a low-level flexbox layout component that provides a focused set of props for building responsive layouts. It maps to Tailwind CSS flexbox utilities and supports the design system's spacing and color tokens.
 
 ```tsx
 import { Box } from '@metamask/design-system-react-native';