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

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

4
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -15,6 +15,7 @@ import { TextField } from '../ui/text-field/TextField.js';
import { SelectField, type SelectOption } from '../ui/select-field/SelectField.js';
import { Button, type ButtonVariant } from '../ui/button/Button.js';
import { Badge, type BadgeTone } from '@hive/shared/badge.js';
import { GearIcon } from '@hive/shared/icons.js';
import { Dropdown, type DropdownOption } from '@hive/shared/dropdown.js';
import './ComponentsPage.css';
@ -234,6 +235,9 @@ export function ComponentsPage() {
<Sample label="interactive, toggles itself (pause/resume shape)">
<BadgeToggleSample />
</Sample>
<Sample label="interactive, quiet variant (icon-only header trigger, e.g. settings)">
<Badge value={<GearIcon />} title="settings" variant="quiet" onClick={() => {}} />
</Sample>
</div>
</Section>
</Panel>