fix hover style

dequelabs · Feb 3, 2025 · a2453be · a2453be
1 parent ad512a8
commit a2453be
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/docs/pages/components/Button.mdx b/docs/pages/components/Button.mdx
@@ -93,14 +93,7 @@ When you need a semantic button with the visual appearance of a link.
 </Button>
 ```
 
-### Disabled Badge with Label
 
-```jsx example
-<Button variant="badge" disabled>
-  <BadgeLabel>Label:</BadgeLabel>
-  value
-</Button>
-```
 
 ### Additional Button States
 
@@ -122,7 +115,7 @@ When you need a semantic button with the visual appearance of a link.
   props={[
     {
       name: 'variant',
-      type: ['primary', 'secondary', 'tertiary', 'error', 'link', 'tag'],
+      type: ['primary', 'secondary', 'tertiary', 'error', 'link', 'tag', 'badge'],
       defaultValue: 'primary',
       description: 'Visual style of the button.'
     },

diff --git a/packages/styles/button.css b/packages/styles/button.css
@@ -48,7 +48,8 @@
   gap: var(--space-smallest);
 }
 
-.Button--tag {
+.Button--tag,
+.Button--badge {
   position: relative;
 }
 
@@ -342,7 +343,9 @@ button.Link {
 }
 
 .cauldron--theme-dark
-  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
+  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before,
+.cauldron--theme-dark
+  .Button--badge:not([disabled]):not([aria-disabled='true']):hover:before {
   box-shadow: 0 0 0 1px var(--dark-workspace-color),
     0 0 0 2px var(--accent-info);
 }