diff --git a/docs/6.x/docs/guides/fonts.md b/docs/6.x/docs/guides/fonts.md
index a72f42c83e..139c5a9635 100644
--- a/docs/6.x/docs/guides/fonts.md
+++ b/docs/6.x/docs/guides/fonts.md
@@ -57,7 +57,7 @@ Older Material Design 2 platform-split font configuration (`configureFonts` with
 In the latest version fonts in theme are structured based on the `variant` keys e.g. `displayLarge` or `bodyMedium` which are then used in `Text`'s component throughout the whole library.
 
 :::info
-The default `fontFamily` is different per particular platfrom:
+The default `fontFamily` is different per particular platform:
 
 ```js
 Platform.select({
diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md
index 35a8f74830..c4874a10a9 100644
--- a/docs/6.x/docs/guides/migration.md
+++ b/docs/6.x/docs/guides/migration.md
@@ -188,6 +188,28 @@ e.g.:
 - The default elevation changed from level `1` to level `3`.
 - The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
 
+### Searchbar
+
+The misspelled `traileringIcon` props have been renamed:
+
+- **`traileringIcon`** → **`trailingIcon`**
+- **`traileringIconColor`** → **`trailingIconColor`**
+- **`traileringIconAccessibilityLabel`** → **`trailingIconAccessibilityLabel`**
+- **`onTraileringIconPress`** → **`onTrailingIconPress`**
+
+```diff
+<Searchbar
+- traileringIcon="microphone"
+- traileringIconColor={colors.onSurfaceVariant}
+- traileringIconAccessibilityLabel="microphone button"
+- onTraileringIconPress={onMicrophonePress}
++ trailingIcon="microphone"
++ trailingIconColor={colors.onSurfaceVariant}
++ trailingIconAccessibilityLabel="microphone button"
++ onTrailingIconPress={onMicrophonePress}
+/>
+```
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.
diff --git a/docs/src/components/ScreenshotTabs.tsx b/docs/src/components/ScreenshotTabs.tsx
index 6a524c3d21..ee45872920 100644
--- a/docs/src/components/ScreenshotTabs.tsx
+++ b/docs/src/components/ScreenshotTabs.tsx
@@ -16,17 +16,17 @@ const getClassName = (value: string) =>
     : `tabScreenshot${value.includes('full-width') ? 'full-width' : ''}`;
 
 const ScreenshotTabs = ({ screenshotData }: ScreenshotTabsProps) => {
-  const renderScreenhot = (src: string): ReactNode => (
+  const renderScreenshot = (src: string): ReactNode => (
     <img src={withBase(src)} className={getClassName(src)} />
   );
 
   if (typeof screenshotData === 'string') {
-    return renderScreenhot(screenshotData);
+    return renderScreenshot(screenshotData);
   }
 
   const screenshots = Object.entries(screenshotData).map(([key, value]) => (
     <TabItem key={key} value={key} label={key} default>
-      {typeof value === 'string' ? renderScreenhot(value) : null}
+      {typeof value === 'string' ? renderScreenshot(value) : null}
     </TabItem>
   ));
 
diff --git a/docs/src/data/themeColors.ts b/docs/src/data/themeColors.ts
index 20f16962f7..118114da27 100644
--- a/docs/src/data/themeColors.ts
+++ b/docs/src/data/themeColors.ts
@@ -164,7 +164,7 @@ export const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
@@ -186,7 +186,7 @@ export const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx
index 739002156b..1a3e98bb8f 100644
--- a/example/src/Examples/SearchbarExample.tsx
+++ b/example/src/Examples/SearchbarExample.tsx
@@ -19,8 +19,8 @@ const SearchExample = () => {
   const [isVisible, setIsVisible] = React.useState(false);
   const [searchQueries, setSearchQuery] = React.useState({
     searchBarMode: '',
-    traileringIcon: '',
-    traileringIconWithRightItem: '',
+    trailingIcon: '',
+    trailingIconWithRightItem: '',
     rightItem: '',
     loadingBarMode: '',
     searchViewMode: '',
@@ -47,36 +47,36 @@ const SearchExample = () => {
             mode="bar"
           />
           <Searchbar
-            placeholder="Trailering icon"
+            placeholder="Trailing icon"
             onChangeText={(query) =>
-              setSearchQuery({ ...searchQueries, traileringIcon: query })
+              setSearchQuery({ ...searchQueries, trailingIcon: query })
             }
-            value={searchQueries.traileringIcon}
-            traileringIcon={'microphone'}
-            traileringIconColor={
+            value={searchQueries.trailingIcon}
+            trailingIcon={'microphone'}
+            trailingIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            traileringIconAccessibilityLabel={'microphone button'}
-            onTraileringIconPress={() => setIsVisible(true)}
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
             style={styles.searchbar}
             mode="bar"
           />
           <Searchbar
             mode="bar"
-            placeholder="Trailering icon with right item"
+            placeholder="Trailing icon with right item"
             onChangeText={(query) =>
               setSearchQuery({
                 ...searchQueries,
-                traileringIconWithRightItem: query,
+                trailingIconWithRightItem: query,
               })
             }
-            value={searchQueries.traileringIconWithRightItem}
-            traileringIcon={'microphone'}
-            traileringIconColor={
+            value={searchQueries.trailingIconWithRightItem}
+            trailingIcon={'microphone'}
+            trailingIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            traileringIconAccessibilityLabel={'microphone button'}
-            onTraileringIconPress={() => setIsVisible(true)}
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
             right={(props) => (
               <Avatar.Image
                 {...props}
@@ -117,7 +117,7 @@ const SearchExample = () => {
             style={styles.searchbar}
             mode="bar"
             loading
-            traileringIcon={'microphone'}
+            trailingIcon={'microphone'}
           />
         </List.Section>
         <List.Section title="View mode">
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 82b327dc74..6f07113572 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -74,7 +74,7 @@ export type Props = Omit<ViewProps, 'style'> & {
    */
   uppercase?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 4cffd781fa..7d0f8ee64a 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -37,7 +37,7 @@ export type Props = {
    */
   onLongPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 5a015fcf8d..4507561a48 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -75,7 +75,7 @@ export type Props = Omit<ViewProps, 'style'> & {
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index dda753186b..50086bbe71 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -39,7 +39,7 @@ export type Props = ViewProps & {
    */
   onPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index 97c930c52e..7c552fce36 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -67,7 +67,7 @@ export type Props = {
    */
   theme?: ThemeProp;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 798abd2c6c..c76bee0557 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -46,11 +46,11 @@ export type Props = {
   /**
    * @supported Available in v5.x with theme version 3
    *
-   * Sets min height with densed layout.
+   * Sets min height with dense layout.
    */
   dense?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 71f7aaec23..b987f7f0e7 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -34,7 +34,7 @@ export type Props = {
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index f1580078f4..02855eef0f 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -82,25 +82,25 @@ export type Props = Omit<TextInputProps, 'style'> & {
   clearTestID?: string;
   /**
    * @supported Available in v5.x with theme version 3
-   * Icon name for the right trailering icon button.
+   * Icon name for the right trailing icon button.
    * Works only when `mode` is set to "bar". It won't be displayed if `loading` is set to `true`.
    */
-  traileringIcon?: IconSource;
+  trailingIcon?: IconSource;
   /**
    * @supported Available in v5.x with theme version 3
-   * Custom color for the right trailering icon, default will be derived from theme
+   * Custom color for the right trailing icon, default will be derived from theme
    */
-  traileringIconColor?: ColorValue;
+  trailingIconColor?: ColorValue;
   /**
-   * Callback to execute on the right trailering icon button press.
+   * Callback to execute on the right trailing icon button press.
    */
-  onTraileringIconPress?: (e: GestureResponderEvent) => void;
+  onTrailingIconPress?: (e: GestureResponderEvent) => void;
   /**
-   * Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button.
+   * Accessibility label for the right trailing icon button. This is read by the screen reader when the user taps the button.
    */
-  traileringIconAccessibilityLabel?: string;
+  trailingIconAccessibilityLabel?: string;
   /**
-   * testID for the right trailering icon button.
+   * testID for the right trailing icon button.
    */
   trailingTestID?: string;
   /**
@@ -183,11 +183,11 @@ const Searchbar = ({
   clearAccessibilityLabel = 'clear',
   clearTestID,
   onClearIconPress,
-  traileringIcon,
-  traileringIconColor,
-  traileringIconAccessibilityLabel,
+  trailingIcon,
+  trailingIconColor,
+  trailingIconAccessibilityLabel,
   trailingTestID,
-  onTraileringIconPress,
+  onTrailingIconPress,
   right,
   mode = 'bar',
   showDivider = true,
@@ -242,8 +242,8 @@ const Searchbar = ({
 
   const isBarMode = mode === 'bar';
   const inputTextAlign = direction === 'rtl' ? 'right' : 'left';
-  const shouldRenderTraileringIcon =
-    isBarMode && traileringIcon && !loading && (!value || right !== undefined);
+  const shouldRenderTrailingIcon =
+    isBarMode && trailingIcon && !loading && (!value || right !== undefined);
 
   return (
     <Surface
@@ -333,14 +333,14 @@ const Searchbar = ({
           />
         </View>
       )}
-      {shouldRenderTraileringIcon ? (
+      {shouldRenderTrailingIcon ? (
         <IconButton
           role="button"
           borderless
-          onPress={onTraileringIconPress}
-          iconColor={traileringIconColor || colors.onSurfaceVariant}
-          icon={traileringIcon}
-          aria-label={traileringIconAccessibilityLabel}
+          onPress={onTrailingIconPress}
+          iconColor={trailingIconColor || colors.onSurfaceVariant}
+          icon={trailingIcon}
+          aria-label={trailingIconAccessibilityLabel}
           testID={trailingTestID}
         />
       ) : null}
diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 33886d7ec1..3b9962a457 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -59,7 +59,7 @@ export type Props = {
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index 48df1a4d4a..a91fd938d5 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -171,7 +171,7 @@ export type Props = Omit<ViewProps, 'pointerEvents' | 'style'> &
 const Surface = ({
   elevation = 1,
   children,
-  theme: overridenTheme,
+  theme: overriddenTheme,
   style,
   backgroundColor: customBackgroundColor,
   borderRadius,
@@ -194,7 +194,7 @@ const Surface = ({
   ref,
   ...rest
 }: Props) => {
-  const theme = useInternalTheme(overridenTheme);
+  const theme = useInternalTheme(overriddenTheme);
 
   const { colors } = theme;
 
diff --git a/src/components/TouchableRipple/TouchableRipple.tsx b/src/components/TouchableRipple/TouchableRipple.tsx
index 128e2c017e..3b98d252c7 100644
--- a/src/components/TouchableRipple/TouchableRipple.tsx
+++ b/src/components/TouchableRipple/TouchableRipple.tsx
@@ -24,7 +24,7 @@ export type Props = PressableProps & {
    */
   borderless?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: Object;
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
index 73572d1601..ced8a2e03b 100644
--- a/src/components/Typography/Text.tsx
+++ b/src/components/Typography/Text.tsx
@@ -127,7 +127,7 @@ const Text = ({
         textStyle = [style, font];
       }
 
-      // Case two:  Nested `Text` has specified `styles` which intefere
+      // Case two:  Nested `Text` has specified `styles` which interfere
       //            with font properties, from the parent's `variant`. For example:
       //              <Chip>
       //                <Text style={{fontSize: 30}}>Nested</Text>
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 95aec82ddd..0d6abb6029 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -89,7 +89,7 @@ describe('renderAppbarContent', () => {
     expect(result).toHaveLength(3);
   });
 
-  it('should render only children types specifed in renderOnly', () => {
+  it('should render only children types specified in renderOnly', () => {
     const result = renderAppbarContent({
       children,
       isDark: false,
diff --git a/src/components/__tests__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx
index f89e57ea98..b733f832d0 100644
--- a/src/components/__tests__/ListUtils.test.tsx
+++ b/src/components/__tests__/ListUtils.test.tsx
@@ -29,7 +29,7 @@ it('returns styles for left item without description', () => {
   expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 });
 });
 
-it('returns styles for left item w/ desctiption', () => {
+it('returns styles for left item w/ description', () => {
   const style = getLeftStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.leftItemV3,
@@ -46,7 +46,7 @@ it('returns styles for right item without description', () => {
   expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 });
 });
 
-it('returns styles for right item w/ desctiption', () => {
+it('returns styles for right item w/ description', () => {
   const style = getRightStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.rightItemV3,
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index 4f4f7ed4c3..ac39f78662 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -90,13 +90,13 @@ it('hides the clear icon when a custom right element is rendered', async () => {
   expect(screen.queryByLabelText('clear')).not.toBeOnTheScreen();
 });
 
-it('renders trailering icon when mode is set to "bar"', async () => {
+it('renders trailing icon when mode is set to "bar"', async () => {
   await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
-      traileringIconAccessibilityLabel="microphone"
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
@@ -104,31 +104,31 @@ it('renders trailering icon when mode is set to "bar"', async () => {
   expect(screen.getByLabelText('microphone')).toBeOnTheScreen();
 });
 
-it('renders trailering icon with press functionality', async () => {
-  const onTraileringIconPressMock = jest.fn();
+it('renders trailing icon with press functionality', async () => {
+  const onTrailingIconPressMock = jest.fn();
 
   await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
-      traileringIconAccessibilityLabel="microphone"
-      onTraileringIconPress={onTraileringIconPressMock}
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
+      onTrailingIconPress={onTrailingIconPressMock}
       mode="bar"
     />
   );
 
   await userEvent.press(screen.getByLabelText('microphone'));
-  expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1);
+  expect(onTrailingIconPressMock).toHaveBeenCalledTimes(1);
 });
 
-it('renders clear icon instead of trailering icon', async () => {
+it('renders clear icon instead of trailing icon', async () => {
   const { rerender } = await render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
-      traileringIconAccessibilityLabel="microphone"
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
@@ -139,8 +139,8 @@ it('renders clear icon instead of trailering icon', async () => {
     <Searchbar
       testID="search-bar"
       value={'test'}
-      traileringIcon={'microphone'}
-      traileringIconAccessibilityLabel="microphone"
+      trailingIcon={'microphone'}
+      trailingIconAccessibilityLabel="microphone"
       mode="bar"
     />
   );
diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx
index 47134613ba..807d5eb502 100644
--- a/src/components/__tests__/SegmentedButton.test.tsx
+++ b/src/components/__tests__/SegmentedButton.test.tsx
@@ -150,7 +150,7 @@ describe('getSegmentedButtonColors', () => {
     ).toMatchObject({ backgroundColor: LightTheme.colors.secondaryContainer });
   });
 
-  it('should return correct background color when uncheked (V3 & V2)', () => {
+  it('should return correct background color when unchecked (V3 & V2)', () => {
     expect(
       getSegmentedButtonColors({
         theme: LightTheme,