Badge

<gstock-badge> | GstockBadge

Examples

Color

Utilice el atributo de color para establecer el color del componente.

<gstock-badge color="brand">23</gstock-badge>
<gstock-badge color="neutral">23</gstock-badge>
<gstock-badge color="information">23</gstock-badge>
<gstock-badge color="success">23</gstock-badge>
<gstock-badge color="warning">23</gstock-badge>
<gstock-badge color="danger">23</gstock-badge>

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

<gstock-badge size="small">5</gstock-badge>
<gstock-badge size="small">23</gstock-badge>
<gstock-badge size="small">99</gstock-badge>

<br>

<gstock-badge size="medium">5</gstock-badge>
<gstock-badge size="medium">23</gstock-badge>
<gstock-badge size="medium">99</gstock-badge>

<br>

<gstock-badge size="large">5</gstock-badge>
<gstock-badge size="large">23</gstock-badge>
<gstock-badge size="large">99</gstock-badge>

Pulsante

Utilice el atributo pulse para mostrar el componente con una animación sutil.

<gstock-badge pulse size="small" color="brand">6</gstock-badge>
<gstock-badge pulse size="small" color="neutral">6</gstock-badge>
<gstock-badge pulse size="medium" color="information">6</gstock-badge>
<gstock-badge pulse size="medium" color="success">6</gstock-badge>
<gstock-badge pulse size="large" color="warning">6</gstock-badge>
<gstock-badge pulse size="large" color="danger">6</gstock-badge>

Vacío

Cuando el componente no tiene contenido en su slot, se muestra automáticamente como un indicador vacío (dot).

<gstock-badge pulse size="small" color="brand"></gstock-badge>
<gstock-badge pulse size="small" color="neutral"></gstock-badge>
<gstock-badge pulse size="medium" color="information"></gstock-badge>
<gstock-badge pulse size="medium" color="success"></gstock-badge>
<gstock-badge pulse size="large" color="warning"></gstock-badge>
<gstock-badge pulse size="large" color="danger"></gstock-badge>

Posición

Utilice el atributo placement para posicionar el badge como un indicador superpuesto dentro de un componente contenedor. Los valores disponibles son top-start, top-end, bottom-start y bottom-end.

<div class="badge-placement-preview">
  <div class="badge-placement-container">
    <gstock-badge color="danger" placement="top-end">5</gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="danger" placement="top-start">5</gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="success" placement="top-end"></gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="success" placement="top-start"></gstock-badge>
  </div>
</div>

<br>

<div class="badge-placement-preview">
  <div class="badge-placement-container">
    <gstock-badge color="danger" placement="bottom-end">5</gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="danger" placement="bottom-start">5</gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="success" placement="bottom-end"></gstock-badge>
  </div>

  <div class="badge-placement-container">
    <gstock-badge color="success" placement="bottom-start"></gstock-badge>
  </div>
</div>

<style>
  .badge-placement-preview {
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .badge-placement-container {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px dashed var(--gstock-color-border);
    border-radius: var(--gstock-border-radius-sm);
  }
</style>

Usar en componentes

El badge admite dos modos de integración según el contexto del componente contenedor:

Modo	`placement`	Posicionamiento	Caso de uso
Overlay	Requerido	`position: absolute` sobre el contenedor	Indicadores sobre icon buttons
Inline	No aplicable	Flujo normal del documento (flexbox)	Contadores en buttons

Overlay (icon buttons)

El badge se posiciona como un indicador superpuesto utilizando position: absolute y translate. El contenedor debe tener position: relative para que el badge se ancle correctamente. La posición se controla mediante el atributo placement.

top-start

top-end

bottom-start

bottom-end

<div class="badge-row">
  <gstock-icon-button icon="mail" color="neutral" size="small" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="small">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="small" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="small"></gstock-badge>
  </gstock-icon-button>
</div>

<br>

<div class="badge-row">
  <gstock-icon-button icon="mail" color="neutral" size="medium" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="small">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="medium" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="medium">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="medium" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="small"></gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="medium" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="medium"></gstock-badge>
  </gstock-icon-button>
</div>

<br>

<div class="badge-row">
  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="small">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="medium">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="danger" placement="bottom-end" size="large">5</gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="small"></gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="medium"></gstock-badge>
  </gstock-icon-button>

  <gstock-icon-button icon="mail" color="neutral" size="large" variant="outlined">
    <gstock-badge color="success" placement="bottom-end" size="large"></gstock-badge>
  </gstock-icon-button>
</div>

<div class="options">
  <gstock-select class="badge-overview-select" label="Placement" name="placement" size="small" value="bottom-end">
    <gstock-option value="top-start">top-start</gstock-option>
    <gstock-option value="top-end">top-end</gstock-option>
    <gstock-option value="bottom-start">bottom-start</gstock-option>
    <gstock-option value="bottom-end">bottom-end</gstock-option>
  </gstock-select>
</div>

<script type="module">
  
  const badges = document.querySelectorAll('gstock-badge');
  const placement = document.querySelector('[name="placement"]');

  placement.addEventListener('gstock-change-event', () => {
    badges.forEach(badge => {
      badge.placement = placement.value;
    });
  });
</script>

<style>
  .badge-row {
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .options {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }

  .options gstock-select {
    width: 160px;
  }

  .options + .options {
    margin-top: 1rem;
  }
</style>

Inline (buttons)

El badge se inserta en el flujo del contenido a través de los slots con nombre prefix o suffix del componente gstock-button. No requiere el atributo placement; el espaciado se resuelve automáticamente mediante el gap del layout del botón.

Messages 3

<gstock-button variant="outlined" prefix="message-square" size="small">
  Messages
  <gstock-badge slot="suffix" color="warning" size="small">3</gstock-badge>
</gstock-button>

<gstock-button variant="outlined" prefix="message-square" size="medium">
  Messages
  <gstock-badge slot="suffix" color="warning" size="medium">3</gstock-badge>
</gstock-button>

<gstock-button variant="outlined" prefix="message-square" size="large">
  Messages
  <gstock-badge slot="suffix" color="warning" size="large">3</gstock-badge>
</gstock-button>