Chip

Uso

import { Chip } from '@/components/atoms/Chip';

<Chip type="filled" size="s" onClose={() => {}}>
  Design
</Chip>

Props

Gotchas

• a11y

  onClose must have an accessible name (aria-label on the close control).

• react

  variant prop is named type (not variant) — keep in sync with registry variantProp.

Anatomía CSS

<div class="chip">
  <span class="chip__close"></span>
  <span class="chip__icon"></span>
  <span class="chip__label"></span>
</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

Animaciones

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Chip

   Interactive tag with optional leading icon and close button.
   Same sizing discipline as Button: height + padding from tokens,
   gap/radius/icon em-relative.

   Types:   outlined, filled
   Sizes:   xs, s, m, l, xl (same naming as Button)
   States:  enabled, hover, pressed, disabled, error
   ------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  border-radius: 0.5em;
  border: 1.5px solid transparent;
  font-family: 'inter tight', -apple-system, blinkmacsystemfont, 'segoe ui', roboto, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif;
  font-size: 10.24px;
  font-weight: 500;
  line-height: 1;
  color: #0a0a0a;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition:
    background-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chip[data-chip-animate]:active:not(.chip--disabled) {
  scale: 0.955 0.925;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chip[data-chip-animate]:hover:not(.chip--disabled) {
    scale: 1.06 1.095;
    transition:
      background-color 0.15s cubic-bezier(0.19, 1, 0.22, 1),
      border-color 0.15s cubic-bezier(0.19, 1, 0.22, 1),
      scale 500ms 0.05s cubic-bezier(0.32, 0.72, 0, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    transition-duration: 0ms;
  }
  .chip:active:not(.chip--disabled) {
    scale: 1;
  }
}

/* ---- Sizes (height + h-padding explicit, font-size uniform) ---- */

.chip--xs {
  height: 1.25rem;
  padding: 0 4px;
}

.chip--s {
  height: 1.5rem;
  padding: 0 8px;
}

.chip--m {
  height: 2rem;
  padding: 0 8px;
}

.chip--l {
  height: 2.5rem;
  padding: 0 12px;
}

.chip--xl {
  height: 3rem;
  padding: 0 16px;
}

/* ---- Types ---- */

.chip--outlined {
  background-color: #fafafa;
  border-color: #e5e5e5;
}

.chip--outlined:hover:not(.chip--disabled) {
  background-color: #f5f5f5;
}

.chip--filled {
  background-color: #f5f5f5;
}

.chip--filled:hover:not(.chip--disabled) {
  background-color: #f5f5f5;
}

/* ---- Disabled ---- */

.chip--disabled {
  color: #525252;
  cursor: not-allowed;
  pointer-events: none;
}

.chip--disabled.chip--outlined {
  border-color: #f5f5f5;
  background-color: #f5f5f5;
}

.chip--disabled.chip--filled {
  background-color: #f5f5f5;
}

/* ---- Error ---- */

.chip--error.chip--outlined {
  border-color: #f84131;
  color: #f84131;
}

.chip--error.chip--outlined:hover:not(.chip--disabled) {
  background-color: color-mix(in srgb, #f84131 6%, #fafafa);
}

.chip--error.chip--filled {
  background-color: color-mix(in srgb, #f84131 8%, #fafafa);
  color: #f84131;
}

.chip--error.chip--filled:hover:not(.chip--disabled) {
  background-color: color-mix(in srgb, #f84131 12%, #fafafa);
}

/* ---- Focus ---- */

.chip:focus-visible,
.chip--focused {
  box-shadow: 0 0 0 2px var(--focus-ring-color);
  outline: none;
}

/* ---- Parts ---- */

.chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.chip__icon svg {
  width: 100%;
  height: 100%;
}

.chip__label {
  display: inline-flex;
  align-items: center;
}

.chip__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
  padding: 0.125em;
  border: none;
  background-color: color-mix(in srgb, #0a0a0a 6%, transparent);
  color: inherit;
  cursor: pointer;
  border-radius: 9999px;
  transition:
    background-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

.chip__close svg {
  width: 100%;
  height: 100%;
}

.chip__close:active {
  scale: 0.9;
}

.chip--error .chip__close {
  background-color: color-mix(in srgb, #f84131 10%, transparent);
}

.chip--disabled .chip__close {
  cursor: not-allowed;
  pointer-events: none;
  background-color: color-mix(in srgb, #0a0a0a 4%, transparent);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chip__close:hover {
    background-color: color-mix(in srgb, #0a0a0a 12%, transparent);
    scale: 1.06 1.095;
  }

  .chip--error .chip__close:hover {
    background-color: color-mix(in srgb, #f84131 18%, transparent);
  }
}