diff --git a/.changeset/witty-gifts-turn.md b/.changeset/witty-gifts-turn.md
new file mode 100644
index 000000000..84ac2e738
--- /dev/null
+++ b/.changeset/witty-gifts-turn.md
@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': patch
+---
+
+Invert button states for hero and footer toggles.
diff --git a/site/src/components/layout.md b/site/src/components/layout.md
index 62b4a3016..2c356326d 100644
--- a/site/src/components/layout.md
+++ b/site/src/components/layout.md
@@ -28,8 +28,8 @@ This page is utilizing the holy grail layout, but you can use the buttons below
 	<button class="button" data-toggle-layout-height-constraint aria-pressed="false">Constrain layout height</button>
 </div>
 <div class="buttons buttons-addons display-flex">
-	<button class="button" data-toggle-hero-visibility aria-pressed="false">Toggle hero</button>
-	<button class="button" data-toggle-footer-visibility aria-pressed="false">Toggle footer</button>
+	<button class="button button-filled" data-toggle-hero-visibility aria-pressed="true">Toggle hero</button>
+	<button class="button button-filled" data-toggle-footer-visibility aria-pressed="true">Toggle footer</button>
 	<button class="button" data-toggle-flyout-visibility aria-pressed="false">Toggle flyout</button>
 </div>