feat: FIT-1433: Consolidate Badge component by ricardoantoniocm · Pull Request #9465 · HumanSignal/label-studio

ricardoantoniocm · 2026-02-24T20:56:00Z

This pull request consolidates Badge component implementations by migrating from a legacy local Badge component to the standardized UI library Badge component across the application, with updated variant naming and styling properties.

Screenshots

This pull request also updates the way "Enterprise" features are visually marked throughout the application by replacing the deprecated EnterpriseBadge component with the more flexible Badge component, often enhanced with the IconSpark icon. It also introduces improvements to how feature tags are displayed and updates several color design tokens for consistency and accessibility.

Enterprise Badge Replacement and UI Consistency:

Replaced all instances of EnterpriseBadge with the new Badge component, using the gradient variant and the IconSpark icon, in project creation, settings, and storage provider configuration files (CreateProject.jsx, TemplatesList.jsx, GeneralSettings.jsx, and all storage provider files). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]
Updated the display of feature tags in export formats to use the Badge component with dynamic variants (e.g., "Enterprise" uses gradient, "Beta" uses plum, "New" uses positive) for improved clarity and consistency (ExportPage.jsx). (F313ada9L1, web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsxL232-R249)

Design Token and Style Enhancements:

Adjusted several accent color tokens in design-tokens.json for grape, blueberry, kale, and kiwi to use new values and added new subtler variants for each, improving accessibility and visual consistency across light and dark modes. [1] [2] [3] [4] [5] [6] [7] [8]
Minor style tweak for label line height in workspace placeholder for better text alignment (settings.scss).

- Add support for semantic variant aliases (primary/info, neutral/secondary/default, etc.) - Add direct accent color support (grape, kale, persimmon, etc.) - Implement style variants: filled, outline, ghost, solid - Add shape variants: square (default), rounded - Add size variants: medium (default), small (with compact fallback) - Add gradient variant with IconSpark icon support - Update Storybook stories with comprehensive examples - Remove deprecated examples from stories Co-authored-by: Cursor <cursoragent@cursor.com>

- Update imports to use new Badge component and types - Change default variant from 'info' to 'primary' - Change default shape from 'squared' to 'square' - Add support for style and size props - Use Tailwind classes instead of inline styles for hiding badges Co-authored-by: Cursor <cursoragent@cursor.com>

- Convert EnterpriseBadge to a wrapper around Badge with variant='gradient' - Add deprecation JSDoc with migration guide - Map EnterpriseBadge props to Badge props (filled/ghost -> style, compact -> size) Co-authored-by: Cursor <cursoragent@cursor.com>

… Badge component - Replace Tag components with Badge for column type indicators - Update Table.jsx columnHeaderExtra to use Badge with primary variant - Update TableHead.jsx dropdown menu to use Badge for type selection - Use square shape and small size for data type badges - Update enterprise badge to use small size instead of deprecated compact Co-authored-by: Cursor <cursoragent@cursor.com>

…component - Replace Tag components with Badge for parent field data types - Replace EnterpriseBadge with Badge variant='gradient' style='ghost' - Use square shape and small size for data type badges - Remove unused Tag import Co-authored-by: Cursor <cursoragent@cursor.com>

- Update FieldsButton to use Badge variant='gradient' style='ghost' - Update ActionsButton to use Badge variant='gradient' style='ghost' - Update OrderButton to use Badge variant='gradient' style='ghost' - Replace EnterpriseBadge references with Badge component Co-authored-by: Cursor <cursoragent@cursor.com>

…onent - Add tooltip to Enterprise badge in GeneralSettings for Uncertainty sampling - Replace EnterpriseBadge with Badge variant='gradient' in storage providers - Update azure_spi, databricks, gcswif, and s3s storage providers Co-authored-by: Cursor <cursoragent@cursor.com>

- Replace styled div tags with Badge component for export format labels - Map tag text to appropriate variants (enterprise->gradient, beta->plum, new->positive) - Use square shape and small size for format type badges Co-authored-by: Cursor <cursoragent@cursor.com>

…tion - Update CreateProject pages to use Badge variant='gradient' - Update Custom tag component to use Badge variant='gradient' - Update enterprise-upgrade-overlay to use Badge variant='gradient' - Remove unused SCSS styles Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

… Badges and other color-coded components.

- Use design tokens in spark icon SVG and badge gradient styles - Add optional icon prop to Badge; gradient badge no longer auto-injects IconSpark - Align badge variant colors to subtle/dark palette - Remove shadcn Badge from shadcn re-exports Co-authored-by: Cursor <cursoragent@cursor.com>

… state chips - Add getStateVariant() and STATE_TYPE_VARIANTS in state-registry - Deprecate getStateColorClass() / getStyleClasses() in favor of variant - Annotation, project, and task state chips use variant prop - StateChip (ui) accepts variant instead of className Co-authored-by: Cursor <cursoragent@cursor.com>

- EnterpriseBadge and EnterpriseUpgradeOverlay use Badge + icon - Update deprecation migration guide to include icon - TemplatesList, CreateProject, GeneralSettings, FilterLine, Table, Custom: use Badge variant=gradient with icon=<IconSpark /> for Enterprise Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

netlify · 2026-02-24T20:56:05Z

✅ Deploy Preview for label-studio-docs-new-theme ready!

Name	Link
🔨 Latest commit	`aa08deb`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/699e1f47a71acf000862ea0d
😎 Deploy Preview	https://deploy-preview-9465--label-studio-docs-new-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-24T20:56:06Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`aa08deb`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/699e1f4760dca4000882647a
😎 Deploy Preview	https://deploy-preview-9465--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-24T20:56:06Z

✅ Deploy Preview for heartex-docs ready!

Name	Link
🔨 Latest commit	`aa08deb`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/699e1f47a5f64700085ef836
😎 Deploy Preview	https://deploy-preview-9465--heartex-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-24T20:56:52Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`aa08deb`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/699e1f47a5f64700085ef83a
😎 Deploy Preview	https://deploy-preview-9465--label-studio-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ricardoantoniocm · 2026-02-24T21:58:55Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/scripts/merge-cypress-coverage.js

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/22371864848

codecov · 2026-02-24T22:57:25Z

Codecov Report

❌ Patch coverage is 55.26316% with 17 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.74%. Comparing base (3c7db22) to head (aa08deb).

Files with missing lines	Patch %	Lines
web/libs/ui/src/lib/badge-group/badge-group.tsx	0.00%	6 Missing ⚠️
web/libs/ui/src/lib/badge/badge.tsx	80.76%	5 Missing ⚠️
...s/ui/src/lib/enterprise-badge/enterprise-badge.tsx	0.00%	4 Missing ⚠️
web/libs/editor/src/tags/Custom.jsx	0.00%	1 Missing ⚠️
web/libs/ui/src/assets/icons/spark.svg	0.00%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (3c7db22) and HEAD (aa08deb). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (3c7db22) HEAD (aa08deb)

pytests 1 0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #9465      +/-   ##
===========================================
- Coverage    68.32%   60.74%   -7.58%     
===========================================
  Files         1162      885     -277     
  Lines        68984    43766   -25218     
  Branches     11780    11509     -271     
===========================================
- Hits         47133    26587   -20546     
+ Misses       21844    17172    -4672     
  Partials         7        7

Flag	Coverage Δ
lsf-integration	`52.88% <10.81%> (+<0.01%)`	⬆️
lsf-unit	`44.12% <55.26%> (+0.10%)`	⬆️
pytests	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ricardoantoniocm and others added 23 commits February 23, 2026 15:59

feat: FIT-1433: Consolidate Badge component

d706490

Fixes transition timing.

1fc3e93

Updates BooleanCell to use new Badge component.

fdf273a

Makes state chips/badges use the rounded variant of the Badge component.

4f985d7

fix: apply biome formatting fixes

84bf2a0

Co-authored-by: Cursor <cursoragent@cursor.com>

Updates design tokens to support additional accent color variants for…

fa3c4f6

… Badges and other color-coded components.

Adjusts -dark variant of accent colors for Dark Mode.

16a8b7a

chore(ui): align Hotkeys Beta badge to Badge API (variant, style, shape)

4f10ba7

Co-authored-by: Cursor <cursoragent@cursor.com>

Linter fixes.

43211f3

Linter fixes.

987572a

chore: apply biome formatting to design-tokens and tokens.js

c4b7af8

Co-authored-by: Cursor <cursoragent@cursor.com>

ricardoantoniocm self-assigned this Feb 24, 2026

github-actions bot added the feat label Feb 24, 2026

Change tailwind modifer for semantic one.

f1fe4a9

ricardoantoniocm added 2 commits February 24, 2026 16:20

Cleaning up Badge stories.

fb1e795

Cleaning up.

c321caf

Merge branch 'develop' into 'fb-fit-1433/consolidate-badge'

aa08deb

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/22371864848

ricardoantoniocm marked this pull request as ready for review February 24, 2026 22:25

ricardoantoniocm requested review from a team, hlomzik and nick-skriabin as code owners February 24, 2026 22:25

ricardoantoniocm requested review from a team and nass600 February 24, 2026 22:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: FIT-1433: Consolidate Badge component#9465

feat: FIT-1433: Consolidate Badge component#9465
ricardoantoniocm wants to merge 27 commits intodevelopfrom
fb-fit-1433/consolidate-badge

ricardoantoniocm commented Feb 24, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

ricardoantoniocm commented Feb 24, 2026 •

edited by robot-ci-heartex

Loading

Uh oh!

codecov bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

ricardoantoniocm commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Uh oh!

netlify bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-docs-new-theme ready!

Uh oh!

netlify bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

netlify bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs ready!

Uh oh!

netlify bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

ricardoantoniocm commented Feb 24, 2026 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ricardoantoniocm commented Feb 24, 2026 •

edited

Loading

netlify bot commented Feb 24, 2026 •

edited

Loading

netlify bot commented Feb 24, 2026 •

edited

Loading

netlify bot commented Feb 24, 2026 •

edited

Loading

netlify bot commented Feb 24, 2026 •

edited

Loading

ricardoantoniocm commented Feb 24, 2026 •

edited by robot-ci-heartex

Loading

codecov bot commented Feb 24, 2026 •

edited

Loading