Icon Button
<gstock-icon-button>
|
GstockIconButton
Ejemplos
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.