Button

<gstock-button> | GstockButton

Variante

Utilice el atributo variant para establecer la variante del botón.

Solid Outlined Plain 
<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.

Brand Neutral Information Success Warning Danger
Brand Neutral Information Success Warning Danger
Brand Neutral Information Success Warning Danger 
<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.

Small Medium Large
Small Medium Large
Small Medium Large 
<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.

Disabled Disabled Disabled 
<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.

Link New Window Download Disabled 
<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>

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.

Brand Neutral Information Success Warning Danger 
<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.

Prefix Suffix 
<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.

Small Medium Large 
<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.

Small Medium Large 
<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="primary"]).

Cyan Magenta Yellow Key 
<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>