diff --git a/examples/react-native/storybook/stories/Label.stories.tsx b/examples/react-native/storybook/stories/Label.stories.tsx
index f2758341259..b5d0fde11a4 100644
--- a/examples/react-native/storybook/stories/Label.stories.tsx
+++ b/examples/react-native/storybook/stories/Label.stories.tsx
@@ -1,11 +1,42 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { Label } from '@aws-amplify/ui-react-native/dist/primitives';
+import { object, select } from '@storybook/addon-knobs';
+
+import { Label } from '@aws-amplify/ui-react-native/dist/primitives/Label';
+import { LabelVariation } from '@aws-amplify/ui-react-native/dist/primitives/Label/types';
+
+const variations: LabelVariation[] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'warning',
+  'info',
+  'success',
+];
 
 storiesOf('Label', module)
-  .add('default Label', () => <Label>Default Label</Label>)
-  .add('style', () => <Label style={styles.redText}>This should be red</Label>);
+  .add('Default', () => <Label>Default Label</Label>)
+  .add('Styled', () => <Label style={styles.redText}>This should be red</Label>)
+  .add('Variations', () => (
+    <>
+      {variations.map((variation) => (
+        <Label
+          variation={variation}
+          key={variation}
+        >{`${variation} label`}</Label>
+      ))}
+    </>
+  ))
+  .add('Playground', () => (
+    <Label
+      variation={select('Variation', variations, 'primary')}
+      style={object('Style', {})}
+    >
+      Label
+    </Label>
+  ));
 
 const styles = StyleSheet.create({
   redText: {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap
index 0d11c551fd0..595d90f5523 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap
@@ -47,9 +47,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -114,9 +118,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -228,9 +236,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -497,9 +509,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -564,9 +580,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -678,9 +698,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/__snapshots__/ConfirmSignIn.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/__snapshots__/ConfirmSignIn.spec.tsx.snap
index 37e940b2c34..af261b2c074 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/__snapshots__/ConfirmSignIn.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/__snapshots__/ConfirmSignIn.spec.tsx.snap
@@ -47,9 +47,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -269,9 +273,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap
index 50ba3d3c8dc..c4a716c3d73 100644
--- a/packages/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap
@@ -47,9 +47,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -269,9 +273,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap
index f7df01ea053..3cf93b52166 100644
--- a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap
@@ -47,9 +47,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -269,9 +273,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -440,9 +448,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -675,9 +687,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap
index 6a2860be742..9790b91b721 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap
@@ -178,9 +178,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -245,9 +249,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -463,9 +471,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -530,9 +542,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -881,9 +897,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -948,9 +968,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap
index 49e39df3edf..8c20ce18c62 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap
@@ -178,9 +178,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -245,9 +249,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -359,9 +367,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -536,9 +548,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -669,9 +685,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -736,9 +756,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -850,9 +874,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1027,9 +1055,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -1294,9 +1326,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1362,9 +1398,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1477,9 +1517,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1655,9 +1699,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -1921,9 +1969,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1988,9 +2040,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -2102,9 +2158,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -2279,9 +2339,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -2596,9 +2660,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -2663,9 +2731,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -2777,9 +2849,13 @@ Array [
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -2954,9 +3030,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
diff --git a/packages/react-native/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap
index 2e700e4ae3f..cd39f346f47 100644
--- a/packages/react-native/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap
@@ -87,9 +87,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -146,9 +150,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -205,9 +213,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -387,9 +399,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -447,9 +463,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -507,9 +527,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -688,9 +712,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -747,9 +775,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
@@ -806,9 +838,13 @@ Array [
             Array [
               Object {
                 "fontSize": 16,
+                "fontWeight": "400",
                 "marginHorizontal": 4,
                 "marginVertical": 2,
               },
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+              },
               undefined,
             ]
           }
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap b/packages/react-native/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap
index 1bea2ef88c3..1a52fe2b80e 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap
@@ -59,9 +59,13 @@ exports[`FederatedProviderButton renders default button as expected 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         Array [
           Object {
             "fontWeight": "400",
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap
index fa06147c5db..bf92e08f63e 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap
@@ -68,9 +68,13 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
         Array [
           Object {
             "fontSize": 16,
+            "fontWeight": "400",
             "marginHorizontal": 4,
             "marginVertical": 2,
           },
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+          },
           Array [
             Object {
               "fontWeight": "400",
@@ -112,9 +116,13 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
         Array [
           Object {
             "fontSize": 16,
+            "fontWeight": "400",
             "marginHorizontal": 4,
             "marginVertical": 2,
           },
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+          },
           Array [
             Object {
               "fontSize": 16,
diff --git a/packages/react-native/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap b/packages/react-native/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap
index 22d0eee7286..4f8dbf98ad4 100644
--- a/packages/react-native/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap
+++ b/packages/react-native/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap
@@ -30,9 +30,13 @@ exports[`Divider renders as expected with label 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         Array [
           Object {
             "fontSize": 16,
diff --git a/packages/react-native/src/primitives/Label/Label.tsx b/packages/react-native/src/primitives/Label/Label.tsx
index 805aafdb178..6d1e65900bd 100644
--- a/packages/react-native/src/primitives/Label/Label.tsx
+++ b/packages/react-native/src/primitives/Label/Label.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 import { Text } from 'react-native';
+
+import { useTheme } from '../../theme';
 import { LabelProps } from './types';
-import { styles } from './styles';
+import { getThemedStyles } from './styles';
 
 export default function Label({
   accessibilityRole = 'text',
   children,
   style,
+  variant = 'primary',
   ...rest
 }: LabelProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+  const textStyle = [themedStyle.text, themedStyle[variant], style];
+
   return (
-    <Text
-      {...rest}
-      accessibilityRole={accessibilityRole}
-      style={[styles.label, style]}
-    >
+    <Text {...rest} accessibilityRole={accessibilityRole} style={textStyle}>
       {children}
     </Text>
   );
diff --git a/packages/react-native/src/primitives/Label/__tests__/Label.spec.tsx b/packages/react-native/src/primitives/Label/__tests__/Label.spec.tsx
index b7cc7451ead..9cf30f0f357 100644
--- a/packages/react-native/src/primitives/Label/__tests__/Label.spec.tsx
+++ b/packages/react-native/src/primitives/Label/__tests__/Label.spec.tsx
@@ -1,22 +1,75 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
 import Label from '../Label';
 
+const text = 'Default Label';
+const testID = 'labelID';
+const props = {
+  testID,
+};
+
 describe('Label', () => {
   it('renders a default Label', () => {
-    const defaultLabel = TestRenderer.create(<Label>Default Label</Label>);
+    const { toJSON, getByText, getByRole } = render(
+      <Label {...props}>{text}</Label>
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByText(text)).toBeDefined();
+    expect(getByRole('text')).toBeDefined();
+  });
+
+  it('applies accessibility role', () => {
+    const { toJSON, queryByRole, getByRole } = render(
+      <Label {...props} accessibilityRole="none">
+        {text}
+      </Label>
+    );
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(defaultLabel.toJSON()).toMatchSnapshot();
+    expect(queryByRole('text')).toBe(null);
+    expect(getByRole('none')).toBeDefined();
   });
 
-  it('applies style props', () => {
+  it('should apply theme and style props', () => {
     const customStyle = { color: 'red' };
 
-    const styledLabel = TestRenderer.create(
-      <Label style={customStyle}>Red Label</Label>
+    const { toJSON, getByTestId } = render(
+      <Label {...props} style={customStyle}>
+        Red Label
+      </Label>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle['primary'],
+      customStyle,
+    ]);
+  });
+
+  it('should apply variant styles', () => {
+    const variant = 'success';
+
+    const { toJSON, getByTestId } = render(
+      <Label {...props} variant={variant}>
+        Label
+      </Label>
     );
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
 
-    expect(styledLabel.toJSON()).toMatchSnapshot();
-    expect(styledLabel.root.props.style).toBe(customStyle);
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle[variant],
+      undefined, // no custom styles
+    ]);
   });
 });
diff --git a/packages/react-native/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap b/packages/react-native/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap
index e863f5d1cc3..62b06f2aca5 100644
--- a/packages/react-native/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap
+++ b/packages/react-native/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap
@@ -1,39 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Label applies style props 1`] = `
+exports[`Label applies accessibility role 1`] = `
+<Text
+  accessibilityRole="none"
+  style={
+    Array [
+      Object {
+        "fontSize": 16,
+        "fontWeight": "400",
+        "marginHorizontal": 4,
+        "marginVertical": 2,
+      },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      undefined,
+    ]
+  }
+  testID="labelID"
+>
+  Default Label
+</Text>
+`;
+
+exports[`Label renders a default Label 1`] = `
+<Text
+  accessibilityRole="text"
+  style={
+    Array [
+      Object {
+        "fontSize": 16,
+        "fontWeight": "400",
+        "marginHorizontal": 4,
+        "marginVertical": 2,
+      },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      undefined,
+    ]
+  }
+  testID="labelID"
+>
+  Default Label
+</Text>
+`;
+
+exports[`Label should apply theme and style props 1`] = `
 <Text
   accessibilityRole="text"
   style={
     Array [
       Object {
         "fontSize": 16,
+        "fontWeight": "400",
         "marginHorizontal": 4,
         "marginVertical": 2,
       },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
       Object {
         "color": "red",
       },
     ]
   }
+  testID="labelID"
 >
   Red Label
 </Text>
 `;
 
-exports[`Label renders a default Label 1`] = `
+exports[`Label should apply variant styles 1`] = `
 <Text
   accessibilityRole="text"
   style={
     Array [
       Object {
         "fontSize": 16,
+        "fontWeight": "400",
         "marginHorizontal": 4,
         "marginVertical": 2,
       },
+      Object {
+        "color": "hsl(130, 27%, 29%)",
+      },
       undefined,
     ]
   }
+  testID="labelID"
 >
-  Default Label
+  Label
 </Text>
 `;
diff --git a/packages/react-native/src/primitives/Label/styles.ts b/packages/react-native/src/primitives/Label/styles.ts
index d95637734dd..787b7034050 100644
--- a/packages/react-native/src/primitives/Label/styles.ts
+++ b/packages/react-native/src/primitives/Label/styles.ts
@@ -1,7 +1,46 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextStyle } from 'react-native';
 
+import { StrictTheme } from '../../theme';
 import { LabelStyles } from './types';
 
-export const styles: LabelStyles = StyleSheet.create({
-  label: { fontSize: 16, marginVertical: 2, marginHorizontal: 4 },
-});
+export const getThemedStyles = (theme: StrictTheme): LabelStyles => {
+  const { colors, fontSizes, fontWeights, space, components } = theme.tokens;
+
+  return StyleSheet.create({
+    text: {
+      fontSize: fontSizes.medium,
+      fontWeight: fontWeights.normal as TextStyle['fontWeight'],
+      marginVertical: space.xxs,
+      marginHorizontal: space.xs,
+      ...components?.label.text,
+    },
+    primary: {
+      color: colors.font.primary,
+      ...components?.label.primary,
+    },
+    secondary: {
+      color: colors.font.secondary,
+      ...components?.label.secondary,
+    },
+    tertiary: {
+      color: colors.font.tertiary,
+      ...components?.label.tertiary,
+    },
+    error: {
+      color: colors.font.error,
+      ...components?.label.error,
+    },
+    warning: {
+      color: colors.font.warning,
+      ...components?.label.warning,
+    },
+    success: {
+      color: colors.font.success,
+      ...components?.label.success,
+    },
+    info: {
+      color: colors.font.info,
+      ...components?.label.info,
+    },
+  });
+};
diff --git a/packages/react-native/src/primitives/Label/types.ts b/packages/react-native/src/primitives/Label/types.ts
index 450e5701be1..71ed4a181c2 100644
--- a/packages/react-native/src/primitives/Label/types.ts
+++ b/packages/react-native/src/primitives/Label/types.ts
@@ -1,8 +1,31 @@
 import { TextProps, TextStyle } from 'react-native';
 
-export interface LabelProps extends TextProps {}
+export interface LabelProps extends TextProps {
+  /**
+   * @description
+   * The variant property will affect the color of the Label.
+   */
+  variant?: LabelVariant;
+}
 
 export type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
+
+export type LabelVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'success';
+
 export interface LabelStyles {
-  label: TextStyle;
+  text: TextStyle;
+  primary: TextStyle;
+  secondary: TextStyle;
+  tertiary: TextStyle;
+  error: TextStyle;
+  warning: TextStyle;
+  success: TextStyle;
+  info: TextStyle;
 }
diff --git a/packages/react-native/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap b/packages/react-native/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap
index 033d124c94a..a2a63431f7c 100644
--- a/packages/react-native/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap
+++ b/packages/react-native/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap
@@ -24,9 +24,13 @@ exports[`PasswordField renders as expected 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -132,9 +136,13 @@ exports[`PasswordField renders as expected when disabled 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -244,9 +252,13 @@ exports[`PasswordField should be able to hide show password icon 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -310,9 +322,13 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
diff --git a/packages/react-native/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap b/packages/react-native/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap
index ddd0e5e0487..eb3e041b613 100644
--- a/packages/react-native/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap
+++ b/packages/react-native/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap
@@ -50,9 +50,13 @@ exports[`Radio renders as expected when disabled 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -128,9 +132,13 @@ exports[`Radio renders as expected when passing a number to the size prop 1`] =
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -189,9 +197,13 @@ exports[`Radio renders as expected when selected is false 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -267,9 +279,13 @@ exports[`Radio renders as expected when selected is true 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -345,9 +361,13 @@ exports[`Radio renders as expected when size is large 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -423,9 +443,13 @@ exports[`Radio renders as expected when size is medium 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -501,9 +525,13 @@ exports[`Radio renders as expected when size is small 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
diff --git a/packages/react-native/src/primitives/RadioGroup/__tests__/__snapshots__/RadioGroup.spec.tsx.snap b/packages/react-native/src/primitives/RadioGroup/__tests__/__snapshots__/RadioGroup.spec.tsx.snap
index 2532162f201..c5f2ea67396 100644
--- a/packages/react-native/src/primitives/RadioGroup/__tests__/__snapshots__/RadioGroup.spec.tsx.snap
+++ b/packages/react-native/src/primitives/RadioGroup/__tests__/__snapshots__/RadioGroup.spec.tsx.snap
@@ -84,9 +84,13 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -142,9 +146,13 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -200,9 +208,13 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -259,9 +271,13 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -357,9 +373,13 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -415,9 +435,13 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -473,9 +497,13 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -532,9 +560,13 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -630,9 +662,13 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -688,9 +724,13 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -746,9 +786,13 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -805,9 +849,13 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -903,9 +951,13 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -961,9 +1013,13 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1019,9 +1075,13 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1078,9 +1138,13 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1176,9 +1240,13 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1234,9 +1302,13 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1292,9 +1364,13 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1351,9 +1427,13 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1449,9 +1529,13 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1507,9 +1591,13 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1565,9 +1653,13 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
@@ -1624,9 +1716,13 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
           Array [
             Object {
               "fontSize": 16,
+              "fontWeight": "400",
               "marginHorizontal": 4,
               "marginVertical": 2,
             },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
             undefined,
           ]
         }
diff --git a/packages/react-native/src/primitives/TextField/__tests__/__snapshots__/TextField.spec.tsx.snap b/packages/react-native/src/primitives/TextField/__tests__/__snapshots__/TextField.spec.tsx.snap
index ea08eda4fdd..dde4985cd64 100644
--- a/packages/react-native/src/primitives/TextField/__tests__/__snapshots__/TextField.spec.tsx.snap
+++ b/packages/react-native/src/primitives/TextField/__tests__/__snapshots__/TextField.spec.tsx.snap
@@ -24,9 +24,13 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -90,9 +94,13 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -156,9 +164,13 @@ exports[`TextField renders as expected 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -222,9 +234,13 @@ exports[`TextField renders as expected as password field 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -290,9 +306,13 @@ exports[`TextField renders as expected when disabled 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -356,9 +376,13 @@ exports[`TextField renders as expected with error message 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
@@ -401,9 +425,13 @@ exports[`TextField renders as expected with error message 1`] = `
       Array [
         Object {
           "fontSize": 16,
+          "fontWeight": "400",
           "marginHorizontal": 4,
           "marginVertical": 2,
         },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
         undefined,
       ]
     }
diff --git a/packages/react-native/src/theme/__tests__/createTheme.spec.ts b/packages/react-native/src/theme/__tests__/createTheme.spec.ts
index 955c36c9257..a31221a720b 100644
--- a/packages/react-native/src/theme/__tests__/createTheme.spec.ts
+++ b/packages/react-native/src/theme/__tests__/createTheme.spec.ts
@@ -2,12 +2,11 @@ import baseTokens from '@aws-amplify/ui/dist/react-native/tokens';
 import { createTheme } from '../createTheme';
 
 describe('createTheme', () => {
-  describe('without a base theme', () => {
+  describe('without a custom theme', () => {
     const { tokens } = createTheme({ name: 'test-theme' });
 
-    it('should have tokens', () => {
+    it('should have component agnostic tokens', () => {
       expect(tokens).toBeDefined();
-      expect(tokens.components).toBeDefined();
 
       expect(tokens.colors).toStrictEqual(baseTokens.colors);
       expect(tokens.fontSizes).toStrictEqual(baseTokens.fontSizes);
@@ -17,6 +16,36 @@ describe('createTheme', () => {
       expect(tokens.space).toStrictEqual(baseTokens.space);
       expect(tokens.time).toStrictEqual(baseTokens.time);
     });
+
+    it('should not have component tokens', () => {
+      expect(tokens.components).toBeUndefined();
+    });
+  });
+
+  describe('with a custom theme', () => {
+    const theme = createTheme({
+      name: 'test-theme',
+      tokens: {
+        colors: {
+          font: {
+            primary: '{colors.white}',
+            secondary: 'purple',
+          },
+        },
+        components: {
+          label: {
+            text: { color: 'blue' },
+          },
+        },
+      },
+    });
+
+    it('should override the base theme', () => {
+      const { tokens } = theme;
+      expect(tokens.colors.font.primary).toEqual('hsl(0, 0%, 100%)');
+      expect(tokens.colors.font.secondary).toEqual('purple');
+      expect(tokens.components?.label.text.color).toEqual('blue');
+    });
   });
   //TODO add more tests once component tokens are added
 });
diff --git a/packages/react-native/src/theme/__tests__/utils.spec.ts b/packages/react-native/src/theme/__tests__/utils.spec.ts
index bbc30a1fbcf..1fcec29870b 100644
--- a/packages/react-native/src/theme/__tests__/utils.spec.ts
+++ b/packages/react-native/src/theme/__tests__/utils.spec.ts
@@ -1,10 +1,8 @@
 import baseTokens from '@aws-amplify/ui/dist/react-native/tokens';
 
-import { Tokens } from '../types';
 import { setupTokens } from '../utils';
 
-// setupTokens will receive a fully defined theme so all props are required
-const tokens: Tokens = {
+const customTokens = {
   ...baseTokens,
   colors: {
     ...baseTokens.colors,
@@ -19,13 +17,13 @@ const tokens: Tokens = {
       },
     },
   },
-  components: {},
 };
 
 describe('utils', () => {
   describe('setupTokens', () => {
+    const finalTokens = setupTokens(customTokens);
+
     it('should replace token references with values', () => {
-      const finalTokens = setupTokens(tokens);
       expect(finalTokens.colors.brand.secondary[10]).toEqual('#bada55');
     });
   });
diff --git a/packages/react-native/src/theme/defaultTheme.ts b/packages/react-native/src/theme/defaultTheme.ts
index 065082a2748..e25992db444 100644
--- a/packages/react-native/src/theme/defaultTheme.ts
+++ b/packages/react-native/src/theme/defaultTheme.ts
@@ -1,6 +1,6 @@
-import { tokens, StrictTheme } from './types';
+import { tokens, Theme } from './types';
 
-export const defaultTheme: StrictTheme = {
+export const defaultTheme: Theme = {
   tokens,
   name: 'default-theme',
   colorMode: 'system',
diff --git a/packages/react-native/src/theme/types.ts b/packages/react-native/src/theme/types.ts
index a3d33681d65..666dca434bd 100644
--- a/packages/react-native/src/theme/types.ts
+++ b/packages/react-native/src/theme/types.ts
@@ -2,8 +2,10 @@ import { PartialDeep } from 'type-fest';
 import { ReactNativeTokens } from '@aws-amplify/ui/src/theme/tokens';
 import baseTokens from '@aws-amplify/ui/dist/react-native/tokens';
 
+import { LabelStyles } from '../primitives/Label/types';
+
 export interface Tokens extends ReactNativeTokens {
-  components: ComponentStyles;
+  components?: ComponentStyles;
 }
 
 type Override = Omit<StrictTheme, 'overrides'>;
@@ -33,6 +35,7 @@ export interface Theme {
 
 export interface ComponentStyles {
   // TODO: add components
+  label: LabelStyles;
 }
 
 /**
@@ -45,11 +48,6 @@ export interface StrictTheme extends Theme {
   tokens: Tokens;
 }
 
-export const components: ComponentStyles = {
-  //TODO: add component styles
-};
-
-export const tokens: Tokens = {
+export const tokens: ReactNativeTokens = {
   ...baseTokens,
-  components,
 };
diff --git a/packages/react-native/src/theme/utils.ts b/packages/react-native/src/theme/utils.ts
index 3f41a08af8f..43d9e9eedbd 100644
--- a/packages/react-native/src/theme/utils.ts
+++ b/packages/react-native/src/theme/utils.ts
@@ -20,7 +20,7 @@ const parseTokenValue = (tokens: Tokens, value: string) => {
   return typeof value === 'string' &&
     value.startsWith('{') &&
     value.endsWith('}')
-    ? (get(tokens, value.substring(1, value.length - 2)) as string) // cast back to string to appease TS, as lodash get returns any
+    ? (get(tokens, value.substring(1, value.length - 1)) as string) // cast back to string to appease TS, as lodash get returns any
     : value;
 };