diff --git a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
index 72c0904..06fd2bb 100644
--- a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -92,6 +93,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -200,6 +202,7 @@ exports[`ButtonGroup props should be passed to each button 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #0070f3;
           }
 
           .btn:hover {
@@ -308,6 +311,7 @@ exports[`ButtonGroup props should be passed to each button 2`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #0070f3;
           }
 
           .btn:hover {
@@ -416,6 +420,7 @@ exports[`ButtonGroup should render correctly 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
diff --git a/components/button/__tests__/__snapshots__/icon.test.tsx.snap b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
index 55796dc..62c0e08 100644
--- a/components/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`ButtonIcon should render correctly 1`] = `
             --zeit-ui-button-padding: 1.375rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -158,6 +159,7 @@ exports[`ButtonIcon should work with right 1`] = `
             --zeit-ui-button-padding: 1.375rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
diff --git a/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
index 8fcaa31..03acd43 100644
--- a/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`UseToast should render different actions 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #000;
           }
 
           .btn:hover {
@@ -92,6 +93,7 @@ exports[`UseToast should render different actions 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {