diff --git a/docs/pages/components/toggle.mdx b/docs/pages/components/toggle.mdx
index 90411e9266..cbc7ed7a5f 100644
--- a/docs/pages/components/toggle.mdx
+++ b/docs/pages/components/toggle.mdx
@@ -63,6 +63,23 @@ function() {
 }
 ```
 
+Or use the `Label` component
+
+```jsx
+function() {
+  const [toggle, setToggle] = React.useState(false)
+
+  return (
+    <Stack>
+     <Label>
+        <Toggle size="sm" checked={toggle} onClick={() => setToggle(!toggle)} />
+        <span>Toggle</span>
+      </Label>
+    </Stack>
+  )
+}
+```
+
 ## Hint
 
 Use Field component to add a `hint`
diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
index 311530a10d..e2c78aa4b0 100644
--- a/packages/Core/src/theme/toggles.ts
+++ b/packages/Core/src/theme/toggles.ts
@@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components'
 import { WuiTheme } from './types'
 
 // To allow for line-height of text in label
-const XS_LINE_HEIGHT_ADJUSTMENTS = '0.40rem'
-const SM_LINE_HEIGHT_ADJUSTMENTS = '0.10rem'
+const XS_LINE_HEIGHT_ADJUSTMENTS = '0.32rem !important'
+const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important'
 
 type State = 'default' | 'checked' | 'disabled' | 'sizes'
 
diff --git a/packages/Toggle/src/styles.ts b/packages/Toggle/src/styles.ts
index 92b5ebf1cb..968f9c1534 100644
--- a/packages/Toggle/src/styles.ts
+++ b/packages/Toggle/src/styles.ts
@@ -28,7 +28,7 @@ export const Toggle = styled(Ariakit.Checkbox).withConfig({ shouldForwardProp })
       position: absolute;
       margin: auto;
       transition: medium;
-      z-index: 2;
+      z-index: 1;
     }
 
     &:disabled {