diff --git a/apps/docs/docs/learn/06-recipes/02-variants.mdx b/apps/docs/docs/learn/06-recipes/02-variants.mdx
index e84f6edf..136deb6e 100644
--- a/apps/docs/docs/learn/06-recipes/02-variants.mdx
+++ b/apps/docs/docs/learn/06-recipes/02-variants.mdx
@@ -21,6 +21,13 @@ Here’s how you can create a button component with different visual styles base
 import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
+  base: {
+    appearance: 'none',
+    borderWidth: 0,
+  },
+});
+
+const variants = stylex.create({
   primary: {
     backgroundColor: {
       default: 'blue',
@@ -38,7 +45,7 @@ const styles = stylex.create({
 });
 
 function Button({ variant = 'primary', ...props }) {
-  return <button {...props} {...stylex.props(styles[variant], props.style)} />;
+  return <button {...props} {...stylex.props(styles.base, variants[variant], props.style)} />;
 }
 
 // Usage