Button
<gstock-button>
|
GstockButton
Ejemplos
Variante
Utilice el atributo variant para establecer la variante del botón.
<gstock-button variant="solid">Solid</gstock-button>
<gstock-button variant="outlined">Outlined</gstock-button>
<gstock-button variant="plain">Plain</gstock-button>Color
Utilice el atributo color para establecer el color del botón.
<gstock-button color="brand" variant="solid">Brand</gstock-button>
<gstock-button color="neutral" variant="solid">Neutral</gstock-button>
<gstock-button color="information" variant="solid">Information</gstock-button>
<gstock-button color="success" variant="solid">Success</gstock-button>
<gstock-button color="warning" variant="solid">Warning</gstock-button>
<gstock-button color="danger" variant="solid">Danger</gstock-button>
<br>
<gstock-button color="brand" variant="outlined">Brand</gstock-button>
<gstock-button color="neutral" variant="outlined">Neutral</gstock-button>
<gstock-button color="information" variant="outlined">Information</gstock-button>
<gstock-button color="success" variant="outlined">Success</gstock-button>
<gstock-button color="warning" variant="outlined">Warning</gstock-button>
<gstock-button color="danger" variant="outlined">Danger</gstock-button>
<br>
<gstock-button color="brand" variant="plain">Brand</gstock-button>
<gstock-button color="neutral" variant="plain">Neutral</gstock-button>
<gstock-button color="information" variant="plain">Information</gstock-button>
<gstock-button color="success" variant="plain">Success</gstock-button>
<gstock-button color="warning" variant="plain">Warning</gstock-button>
<gstock-button color="danger" variant="plain">Danger</gstock-button>Tamaño
Utilice el atributo size para cambiar el tamaño del botón.
<gstock-button size="small">Small</gstock-button>
<gstock-button size="medium">Medium</gstock-button>
<gstock-button size="large">Large</gstock-button>
<br>
<gstock-button size="small" variant="outlined">Small</gstock-button>
<gstock-button size="medium" variant="outlined">Medium</gstock-button>
<gstock-button size="large" variant="outlined">Large</gstock-button>
<br>
<gstock-button size="small" variant="plain">Small</gstock-button>
<gstock-button size="medium" variant="plain">Medium</gstock-button>
<gstock-button size="large" variant="plain">Large</gstock-button>Deshabilitado
Utilice el atributo disabled para deshabilitar el botón.
<gstock-button variant="solid" disabled>Disabled</gstock-button>
<gstock-button variant="outlined" disabled>Disabled</gstock-button>
<gstock-button variant="plain" disabled>Disabled</gstock-button>Enlace
Utilice el atributo href para que el botón 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-button prefix="link" href="https://example.com/">Link</gstock-button>
<gstock-button prefix="external-link" href="https://example.com/" target="_blank">
New Window
</gstock-button>
<gstock-button prefix="download" href="/assets/images/wordmark.svg" download="gstock.svg">
Download
</gstock-button>
<gstock-button prefix="x-circle" href="https://example.com/" disabled>Disabled</gstock-button>Cuando se establece el atributo target el enlace recibirá rel="noreferrer noopener" por razones de seguridad.
Cargando
Utilice el atributo loading para que un botón muestre indicador de carga.
El ancho permanecerá igual, lo que evitará que los elementos adyacentes se muevan. Los clicks se suprimirán hasta que se elimine el estado de carga.
<gstock-button color="brand" loading>Brand</gstock-button>
<gstock-button color="neutral" loading>Neutral</gstock-button>
<gstock-button color="information" loading>Information</gstock-button>
<gstock-button color="success" loading>Success</gstock-button>
<gstock-button color="warning" loading>Warning</gstock-button>
<gstock-button color="danger" loading>Danger</gstock-button>Prefijo y sufijo
Utilice los atributos prefix y suffix para agregar iconos al inicio o final del botón.
<gstock-button prefix="camera">Prefix</gstock-button>
<gstock-button suffix="star">Suffix</gstock-button>Indicador desplegable
Utilice el atributo caret para agregar un indicador desplegable cuando un botón activa un menú desplegable, un menú o una ventana emergente.
<gstock-button size="small" caret>Small</gstock-button>
<gstock-button size="medium" caret>Medium</gstock-button>
<gstock-button size="large" caret>Large</gstock-button>Ancho personalizado
Utilize el atributo width para hacer que los botones ocupen todo el ancho del contenedor, útil en pantallas más pequeñas.
<gstock-button size="small">Small</gstock-button>
<gstock-button size="medium">Medium</gstock-button>
<gstock-button size="large">Large</gstock-button>
<style>
gstock-button {
width: 100%;
}
</style>Botones personalizados
Este es el enfoque recomendado si necesita agregar variaciones adicionales. Para personalizar una variación existente, modifique el selector para que se dirija al atributo color del botón en lugar de a una clase (por ejemplo, gstock-button[color="brand"]).
<gstock-button class="cyan">Cyan</gstock-button>
<gstock-button class="magenta">Magenta</gstock-button>
<gstock-button class="yellow">Yellow</gstock-button>
<gstock-button class="key">Key</gstock-button>
<style>
gstock-button::part(base) {
transition:
var(--gstock-legacy-transition-medium) transform ease,
var(--gstock-legacy-transition-medium) border ease;
}
gstock-button.cyan::part(base) {
background-color: cyan;
color: black;
box-shadow: 0 2px 8px #0003;
}
gstock-button.magenta::part(base) {
background-color: magenta;
color: black;
box-shadow: 0 2px 8px #0003;
}
gstock-button.yellow::part(base) {
background-color: yellow;
color: black;
box-shadow: 0 2px 8px #0003;
}
gstock-button.key::part(base) {
background-color: black;
color: white;
box-shadow: 0 2px 8px #0003;
}
gstock-button::part(base):hover {
transform: scale(1.25) rotate(-1deg);
}
gstock-button::part(base):active {
transform: scale(1.25) rotate(-15deg) translateY(2px);
}
gstock-button::part(base):focus-visible {
outline: dashed 2px deeppink;
outline-offset: 4px;
}
</style>