Button Group

<gstock-button-group> | GstockButtonGroup

Variante

Utilice el atributo variant para establecer la variante de los botones.

Button Button Button Button
Button Button Button Button
Button Button Button Button 
<gstock-button-group variant="solid">
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group variant="outlined">
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group variant="plain">
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
</gstock-button-group>

Color

Utilice el atributo color para establecer el color de los botones.

Brand Brand Brand Brand
Neutral Neutral Neutral Neutral
Information Information Information Information
Success Success Success Success
Warning Warning Warning Warning
Danger Danger Danger Danger 
<gstock-button-group color="brand">
  <gstock-button>Brand</gstock-button>
  <gstock-button>Brand</gstock-button>
  <gstock-button>Brand</gstock-button>
  <gstock-button>Brand</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group color="neutral">
  <gstock-button>Neutral</gstock-button>
  <gstock-button>Neutral</gstock-button>
  <gstock-button>Neutral</gstock-button>
  <gstock-button>Neutral</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group color="information">
  <gstock-button>Information</gstock-button>
  <gstock-button>Information</gstock-button>
  <gstock-button>Information</gstock-button>
  <gstock-button>Information</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group color="success">
  <gstock-button>Success</gstock-button>
  <gstock-button>Success</gstock-button>
  <gstock-button>Success</gstock-button>
  <gstock-button>Success</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group color="warning">
  <gstock-button>Warning</gstock-button>
  <gstock-button>Warning</gstock-button>
  <gstock-button>Warning</gstock-button>
  <gstock-button>Warning</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group color="danger">
  <gstock-button>Danger</gstock-button>
  <gstock-button>Danger</gstock-button>
  <gstock-button>Danger</gstock-button>
  <gstock-button>Danger</gstock-button>
</gstock-button-group>

Tamaño

Utilice el atributo size para cambiar el tamaño de los botones.

Small Small Small Small
Medium Medium Medium Medium
Large Large Large Large 
<gstock-button-group size="small">
  <gstock-button>Small</gstock-button>
  <gstock-button>Small</gstock-button>
  <gstock-button>Small</gstock-button>
  <gstock-button>Small</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group size="medium">
  <gstock-button>Medium</gstock-button>
  <gstock-button>Medium</gstock-button>
  <gstock-button>Medium</gstock-button>
  <gstock-button>Medium</gstock-button>
</gstock-button-group>

<br />

<gstock-button-group size="large">
  <gstock-button>Large</gstock-button>
  <gstock-button>Large</gstock-button>
  <gstock-button>Large</gstock-button>
  <gstock-button>Large</gstock-button>
</gstock-button-group>

Deshabilitado

Utilice el atributo disabled para deshabilitar los botones.

Disabled Disabled Disabled Disabled 
<gstock-button-group disabled>
  <gstock-button>Disabled</gstock-button>
  <gstock-button>Disabled</gstock-button>
  <gstock-button>Disabled</gstock-button>
  <gstock-button>Disabled</gstock-button>
</gstock-button-group>

Vertical

Utilice el atributo vertical para mostrar los botones verticalmente.

Button Button Button Button 
<gstock-button-group vertical>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
  <gstock-button>Button</gstock-button>
</gstock-button-group>