Icon Button
<gstock-icon-button>
|
GstockIconButton
Variante
Utilice el atributo variant para establecer la variante del componente.
<gstock-icon-button icon="star" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="star" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="star" variant="plain"></gstock-icon-button>
Color
Utilice el atributo de color para establecer el color del componente.
<gstock-icon-button icon="sun" color="brand" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="alert-circle" color="information" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="check-circle" color="success" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="alert-triangle" color="warning" variant="solid"></gstock-icon-button>
<gstock-icon-button icon="alert-octagon" color="danger" variant="solid"></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" color="brand" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="alert-circle" color="information" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="check-circle" color="success" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="alert-triangle" color="warning" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="alert-octagon" color="danger" variant="outlined"></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" color="brand" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="alert-circle" color="information" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="check-circle" color="success" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="alert-triangle" color="warning" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="alert-octagon" color="danger" variant="plain"></gstock-icon-button>
Tamaño
Utilice el atributo de size para cambiar el tamaño del componente.
<gstock-icon-button icon="sun" size="small"></gstock-icon-button>
<gstock-icon-button icon="sun" size="medium"></gstock-icon-button>
<gstock-icon-button icon="sun" size="large"></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" size="small" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="sun" size="medium" variant="outlined"></gstock-icon-button>
<gstock-icon-button icon="sun" size="large" variant="outlined"></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" size="small" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="sun" size="medium" variant="plain"></gstock-icon-button>
<gstock-icon-button icon="sun" size="large" variant="plain"></gstock-icon-button>
Deshabilitado
Utilice el atributo disabled para deshabilitar el componente.
<gstock-icon-button icon="sun" color="brand" variant="solid" disabled></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="solid" disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-circle"
color="information"
variant="solid"
disabled></gstock-icon-button>
<gstock-icon-button
icon="check-circle"
color="success"
variant="solid"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-triangle"
color="warning"
variant="solid"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-octagon"
color="danger"
variant="solid"
disabled></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" color="brand" variant="outlined" disabled></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="outlined" disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-circle"
color="information"
variant="outlined"
disabled></gstock-icon-button>
<gstock-icon-button
icon="check-circle"
color="success"
variant="outlined"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-triangle"
color="warning"
variant="outlined"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-octagon"
color="danger"
variant="outlined"
disabled></gstock-icon-button>
<br />
<gstock-icon-button icon="sun" color="brand" variant="plain" disabled></gstock-icon-button>
<gstock-icon-button icon="moon" color="neutral" variant="plain" disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-circle"
color="information"
variant="plain"
disabled></gstock-icon-button>
<gstock-icon-button
icon="check-circle"
color="success"
variant="plain"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-triangle"
color="warning"
variant="plain"
disabled></gstock-icon-button>
<gstock-icon-button
icon="alert-octagon"
color="danger"
variant="plain"
disabled></gstock-icon-button>
Enlace
Utilice el atributo href para que el componente muestre un
<a> en segundo plano. Esto le brinda todo el comportamiento de
vínculo predeterminado que proporciona el navegador y expone los atributos de
target y download.
<gstock-icon-button variant="plain" icon="link" label="Link" href="https://example.com">
</gstock-icon-button>
<gstock-icon-button
variant="plain"
icon="external-link"
label="New Window"
href="https://example.com"
target="_blank">
</gstock-icon-button>
<gstock-icon-button
variant="plain"
icon="download"
label="Download"
href="/assets/images/wordmark.svg"
download="gstock.svg">
</gstock-icon-button>
<gstock-icon-button
variant="plain"
icon="x-circle"
label="Disabled"
href="https://example.com"
disabled>
</gstock-icon-button>
Cuando se establece el atributo target el enlace recibirá
rel="noreferrer noopener" por
razones de seguridad.
Uso con Tooltip
Envuelve el componente con un gstock-tooltip para brindar información
contextual al usuario.
<gstock-tooltip content="Settings" placement="bottom">
<gstock-icon-button icon="settings"></gstock-icon-button>
</gstock-tooltip>
Uso con Badge
Slotting an gstock-badge element.
<gstock-icon-button icon="bell" size="small" variant="plain">
<gstock-badge color="danger" pulse>4</gstock-badge>
</gstock-icon-button>
<gstock-icon-button icon="bell" size="medium" variant="plain">
<gstock-badge color="danger" pulse>4</gstock-badge>
</gstock-icon-button>
<gstock-icon-button icon="bell" size="large" variant="plain">
<gstock-badge color="danger" pulse>4</gstock-badge>
</gstock-icon-button>