candidate · greenhouse-ui-platform
efeonce.chip
Version 0.1.1. A published contract for products built by agents and humans.
HTML + CSS reference0.1.1
Reference implementation
Chips are compact elements that represent an input, attribute, or action.
Variants
SolidLabelOutlineVariantsChipChipChipAvatarGHChipGHChipGHChipClosableChipChipChip
Sizes
SolidLabelOutlineDefaultChipChipChipSmallChipChipChip
Colors
SolidLabelOutlineDefaultChipChipChipPrimaryGHChipGHChipGHChipSecondaryGHChipGHChipGHChipErrorGHChipGHChipGHChipWarningGHChipGHChipGHChipInfoGHChipGHChipGHChipSuccessGHChipGHChipGHChip
Chips are compact elements that represent an input, attribute, or action.
Variants
SolidLabelOutlineVariantsChipChipChipAvatarGHChipGHChipGHChipClosableChipChipChip
Sizes
SolidLabelOutlineDefaultChipChipChipSmallChipChipChip
Colors
SolidLabelOutlineDefaultChipChipChipPrimaryGHChipGHChipGHChipSecondaryGHChipGHChipGHChipErrorGHChipGHChipGHChipWarningGHChipGHChipGHChipInfoGHChipGHChipGHChipSuccessGHChipGHChipGHChip
Feedback atoms — KPI delta · Status dot
GreenhouseKpiDelta always carries sign + arrow; status dots always carry a label. Color is never the only meaning.
KPI delta · text↗ +12.4%↘ −5.0%↗ +0.3%↗ +8.0%
KPI delta · tonal↗ +12.4%↘ −5.0%↗ +3.2%
Status dotActivoDegradadoBloqueadoEn cursoSin empezar
Animated badge capability — shimmer · signal dot
Use spotlight for launches or highlighted states and signal for live monitoring, with a reduced-motion fallback.
Mark the beat with a Fresh Launch tag for releases, Private Beta while tuning, Now Shipping once it is out the door, and a quieter Status Monitoring pulse when the release needs a status check.
SpotlightLaunchingReadyBeta
SignalHealthyMonitoringDegraded
Framework-agnostic reference. Consumer adapters are reviewed against it.
Before stable
- fixture:chip-variants-avatar-closable
- fixture:chip-colors-sizes
- fixture:chip-feedback-atoms
- fixture:chip-animated-capability
- desktop-mobile-keyboard
- reduced-motion
- Keyboard and focus
- 390 px responsive
- Reduced motion