Badge

<gstock-badge> | GstockBadge

Color

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

23 23 23 23 23 23 
<gstock-badge color="primary">23</gstock-badge>
<gstock-badge color="secondary">23</gstock-badge>
<gstock-badge color="tertiary">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.

5 23 99
5 23 99
5 23 99 
<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.

6 6 6 6 6 6 
<gstock-badge pulse size="small" color="primary">6</gstock-badge>
<gstock-badge pulse size="small" color="secondary">6</gstock-badge>
<gstock-badge pulse size="medium" color="tertiary">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

Utilice el atributo empty para permitir que se muestre el componente vacío. 

<gstock-badge empty pulse size="small" color="primary"></gstock-badge>
<gstock-badge empty pulse size="small" color="secondary"></gstock-badge>
<gstock-badge empty pulse size="medium" color="tertiary"></gstock-badge>
<gstock-badge empty pulse size="medium" color="success"></gstock-badge>
<gstock-badge empty pulse size="large" color="warning"></gstock-badge>
<gstock-badge empty pulse size="large" color="danger"></gstock-badge>

Usar en componentes

Utiliza el componente como elemento secundario en otros componentes y éstos se colocarán automáticamente en la parte superior derecha.

Icon buttons

Use the badge component inner default slot of the gstock-icon-button component.

12 12 12 
<gstock-icon-button icon="bell" size="small">
  <gstock-badge color="danger" size="small">12</gstock-badge>
</gstock-icon-button>

<gstock-icon-button icon="bell" size="medium">
  <gstock-badge color="danger" size="medium">12</gstock-badge>
</gstock-icon-button>

<gstock-icon-button icon="bell" size="large">
  <gstock-badge color="danger" size="large">12</gstock-badge>
</gstock-icon-button>

<br />

<gstock-icon-button icon="bell" size="small">
  <gstock-badge empty color="success" size="small"></gstock-badge>
</gstock-icon-button>

<gstock-icon-button icon="bell" size="medium">
  <gstock-badge empty color="success" size="medium"></gstock-badge>
</gstock-icon-button>

<gstock-icon-button icon="bell" size="large">
  <gstock-badge empty color="success" size="large"></gstock-badge>
</gstock-icon-button>

Header items

Use the badge component inner default slot of the gstock-header-item component.

12 
<gstock-header-item icon="bell">
  <gstock-badge empty pulse color="success"></gstock-badge>
</gstock-header-item>

<gstock-header-item icon="bell">
  <gstock-badge color="success">12</gstock-badge>
</gstock-header-item>

Buttons

Use the badge component inner default slot of the gstock-button component.

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