This component no longer exists. It was in Quantumblack Design System Registry’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-08 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Tag
quantumblack-design-system-registry/tagRemovedComponent
A dismissable tag with icons, variants (primary, secondary, accent, outline, accent-outline), pill shape, and sizes. Leading IconShell color is consumer-managed via tagIconTone (secondary → neutral-inverse).
Install it
npx shadcn@latest add http://designsystem.quantumblack.com/r/tag.jsonSource
1import { type VariantProps, cva } from 'class-variance-authority';2import * as React from 'react';34import { Icon } from '@/components/ui/icon';5import { IconShell } from '@/components/ui/icon-shell';6import { cn } from '@/lib/utils';78const hoverOverlay = {9 normal:10 'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover),var(--color-stateslayer-overlay-hover))] aria-disabled:hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]!',11 inverse:12 'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover-inverse),var(--color-stateslayer-overlay-hover-inverse))] aria-disabled:hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled-inverse),var(--color-stateslayer-overlay-disabled-inverse))]!',13} as const;1415const pressedOverlay = {16 normal:17 'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed),var(--color-stateslayer-overlay-pressed))] aria-disabled:active:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]!',18 inverse:19 'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed-inverse),var(--color-stateslayer-overlay-pressed-inverse))] aria-disabled:active:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled-inverse),var(--color-stateslayer-overlay-disabled-inverse))]!',20} as const;2122const disabledOverlay =23 'aria-disabled:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]';24const disabledOverlayInverse =25 'aria-disabled:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled-inverse),var(--color-stateslayer-overlay-disabled-inverse))]';2627/** Base interaction classes shared with TagToggle (parameterised by disabled prefix) */28function tagBaseStyles(disabledPrefix: 'disabled' | 'aria-disabled') {29 return [30 'whitespace-nowrap outline-none transition-all',31 'focus-visible:ring-2 focus-visible:ring-stroke-status-focus',32 disabledPrefix === 'aria-disabled'33 ? 'aria-disabled:cursor-not-allowed'34 : 'disabled:cursor-not-allowed',35 ];36}3738/**39 * Apply the hover underline to text-bearing children — raw text/number nodes40 * and plain `<span>` wrappers — while skipping design system primitives41// … truncated
What it pulls in
Other registry items
