Tag

<gstock-tag> | GstockTag

Examples

Etiqueta básica

<gstock-tag>Etiqueta básica</gstock-tag>

Estados

Las etiquetas pueden tener diferentes estados para indicar interacción del usuario.

Etiqueta normal

Etiqueta activa

<gstock-tag>Etiqueta normal</gstock-tag>
<gstock-tag active>Etiqueta activa</gstock-tag>

Con enlaces

Use el atributo href para convertir la etiqueta en un enlace.

Enlace externo

Enlace interno

<gstock-tag href="https://example.com">Enlace externo</gstock-tag>
<gstock-tag href="#seccion">Enlace interno</gstock-tag>

Accesibilidad

Use el atributo label para proporcionar contexto adicional a lectores de pantalla.

Tecnología

Diseño

<gstock-tag label="Filtrar productos por categoría de tecnología">Tecnología</gstock-tag>
<gstock-tag label="Filtrar productos por categoría de diseño">Diseño</gstock-tag>

Interactivo

Las etiquetas pueden ser interactivas usando eventos de JavaScript.

Click me

Toggle active

<gstock-tag onclick="handleTagClick(this)" label="Click para alternar estado">Click me</gstock-tag>
<gstock-tag active onclick="handleTagClick(this)" label="Click para alternar estado">
  Toggle active
</gstock-tag>

<script>
  function handleTagClick(tag) {
    tag.active = !tag.active;
    console.log('Tag clicked:', tag.textContent.trim(), 'Active:', tag.active);
  }
</script>

Variaciones

Ejemplos de diferentes usos y combinaciones.

Normal

Activo

Con enlace

Clickeable

<div class="tag-variations">
  <gstock-tag>Normal</gstock-tag>
  <gstock-tag active>Activo</gstock-tag>
  <gstock-tag href="https://example.com">Con enlace</gstock-tag>
  <gstock-tag onclick="console.log('clicked')" label="Etiqueta clickeable">Clickeable</gstock-tag>
</div>

<style>
  .tag-variations {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
</style>