diff --git a/packages/pharos-site/static/guidelines/button.docs.mdx b/packages/pharos-site/static/guidelines/button.docs.mdx
index 24d92ac42..a040e563f 100644
--- a/packages/pharos-site/static/guidelines/button.docs.mdx
+++ b/packages/pharos-site/static/guidelines/button.docs.mdx
@@ -306,8 +306,8 @@ import ellipsesExample from '@images/components/button/buttons_ellipses-example.
   <PageSection title="Buttons on dark background" subSectionLevel={1}>
     <p>
       When a button is used on a darker background (e.g., black or marble-gray-20), use the
-      is-on-background attribute. The four variants described above can all be used on dark
-      backgrounds and follow the same guidelines.
+      on-background attribute. The four variants described above can all be used on dark backgrounds
+      and follow the same guidelines.
     </p>
     <div
       style={{
@@ -316,10 +316,10 @@ import ellipsesExample from '@images/components/button/buttons_ellipses-example.
         width: '45%',
       }}
     >
-      <PharosButton name="primary-is-on-background" is-on-background>
+      <PharosButton name="primary-on-background" on-background>
         Primary button
       </PharosButton>
-      <PharosButton name="secondary-is-on-background" variant="secondary" is-on-background>
+      <PharosButton name="secondary-on-background" variant="secondary" on-background>
         Secondary button
       </PharosButton>
     </div>
diff --git a/packages/pharos-site/static/styles/global.scss b/packages/pharos-site/static/styles/global.scss
index 2eba82dc2..dbd8ee139 100644
--- a/packages/pharos-site/static/styles/global.scss
+++ b/packages/pharos-site/static/styles/global.scss
@@ -47,7 +47,7 @@ p.alert-example__content + p.alert-example__content {
   margin-top: 0;
 }
 
-.checkbox-example__container--is-on-background {
+.checkbox-example__container--on-background {
   padding: 1rem;
   background-color: var(--pharos-color-black);
 }