From 3a67dbcfca9156aa2e3c3b3c761d5056915309e2 Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Sun, 14 Feb 2021 20:54:04 -0500 Subject: [PATCH] docs(variants): Clearly explain variant notation (#1494) * docs(variants): Clearly explain variant notation * Add section about styles variants --- packages/docs/src/pages/guides/variants.mdx | 40 +++++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/docs/src/pages/guides/variants.mdx b/packages/docs/src/pages/guides/variants.mdx index 9104da83c..4d6f1d561 100644 --- a/packages/docs/src/pages/guides/variants.mdx +++ b/packages/docs/src/pages/guides/variants.mdx @@ -30,21 +30,43 @@ For example, you can define `primary` and `secondary` variants for buttons and u } ``` -With the `theme` object above, the `buttons` variants can be referenced in the `sx` prop. +With the `theme` object above, the `buttons` variants can be referenced by any tag through [the `sx` prop](/sx-prop). +Inside `sx`, the variant should begin with a top-level key from the theme, then use dot notation to access nested objects. ```jsx