vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

badge: add a quiet variant for icon-only header triggers

Browse source 
Badge's default look is a filled pill, right for status/picker chips
but wrong for an icon-only header button like the settings gear or
agent links trigger, which should read as chrome. Add variant='quiet'
(same naming/shape as Button's ButtonVariant) that drops the idle
background, keeping the existing hover/expanded feedback.

Apply it to the two icon-only Badge triggers: shared SettingsMenu
(used by both swarm-ui and the agent page) and the agent page's own
MetaNav links trigger. Add a components-page showcase sample so the
variant has a visible regression check going forward.
This commit is contained in:
iris 2026-08-29 20:23:00 +02:00 • committed by mara
commit e1aae29068
5 changed files with 68 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/packages/shared/src/badge/Badge.css
View file

@ -30,6 +30,14 @@
opacity: 0.6;
cursor: default;
}
/* `variant="quiet"` — icon-only header triggers (settings/links), not
status chips: no permanent fill, so it reads as chrome next to the
rest of the header rather than another data pill. The `:hover` and
`[aria-expanded='true']` rules above still apply — quiet only drops
the idle background, which is what mara's report was actually about. */
.ui-badge-quiet {
background: none;
}
.ui-badge-interactive[aria-expanded='true'] {
background: var(--bg-elev);
outline: 1px solid var(--purple);