Tag - Design System

1. Tamaños · neutral

Tag text Tag text Tag text Tag text

Mostrar HTML

<div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
  <span class="gn-tag gn-tag--neutral gn-tag--sm">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--neutral gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--neutral gn-tag--lg">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--neutral gn-tag--xl">
    <span class="gn-tag__text">Tag text</span>
  </span>
</div>

2. Tipos

Tag text Tag text Tag text Tag text Tag text Tag text

Mostrar HTML

<div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
  <span class="gn-tag gn-tag--neutral gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--info gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--success gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--warning gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--alert gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
  <span class="gn-tag gn-tag--invert gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
  </span>
</div>

3. Con icono inicial

En tramitación En tramitación En tramitación

Mostrar HTML

<div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
  <span class="gn-tag gn-tag--info gn-tag--base">
    <svg class="gn-tag__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
    </svg>
    <span class="gn-tag__text">En tramitación</span>
  </span>
  <span class="gn-tag gn-tag--neutral gn-tag--base">
    <svg class="gn-tag__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
    </svg>
    <span class="gn-tag__text">En tramitación</span>
  </span>
  <span class="gn-tag gn-tag--invert gn-tag--base">
    <svg class="gn-tag__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
    </svg>
    <span class="gn-tag__text">En tramitación</span>
  </span>
</div>

4. Con cierre

Presentado Requiere subsanación Caducado Tag text Tag text

Mostrar HTML

<div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
  <span class="gn-tag gn-tag--success gn-tag--base">
    <span class="gn-tag__text">Presentado</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag Presentado">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
  <span class="gn-tag gn-tag--warning gn-tag--base">
    <span class="gn-tag__text">Requiere subsanación</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag Requiere subsanación">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
  <span class="gn-tag gn-tag--alert gn-tag--base">
    <span class="gn-tag__text">Caducado</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag Caducado">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
  <span class="gn-tag gn-tag--neutral gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag Tag text">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
  <span class="gn-tag gn-tag--invert gn-tag--base">
    <span class="gn-tag__text">Tag text</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag Tag text">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
</div>

5. Con icono inicial y cierre

En tramitación En tramitación

Mostrar HTML

<div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
  <span class="gn-tag gn-tag--neutral gn-tag--base">
    <svg class="gn-tag__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
    </svg>
    <span class="gn-tag__text">En tramitación</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag En tramitación">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
  <span class="gn-tag gn-tag--invert gn-tag--base">
    <svg class="gn-tag__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
    </svg>
    <span class="gn-tag__text">En tramitación</span>
    <button type="button" class="gn-tag__remove" aria-label="Eliminar tag En tramitación">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M18.8252 6.22461L13.0498 12L18.8252 17.7754L17.7744 18.8252L12 13.0498L6.22461 18.8252L5.1748 17.7754L10.9502 12L5.1748 6.22461L6.22461 5.1748L12 10.9502L17.7744 5.1748L18.8252 6.22461Z"/>
      </svg>
    </button>
  </span>
</div>