Botones

Joined Button Group

Una fila de botones fusionados borde con borde en un control segmentado, con costuras compartidas que se iluminan entre los dos botones que se desplazan o presionan.

Cómo usar Joined Button Group

Una fila de botones fusionados borde con borde en un control segmentado, con costuras compartidas que se iluminan entre los dos botones que se desplazan o presionan.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: orientation, buttonCount, accent

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

El código, las versiones y los comandos de instalación están disponibles en el panel superior.

Conecta tu agente

Relacionados

2225Segmented Toggle RowBotonesUna fila de botones de íconos fusionados en una barra donde exactamente un segmento permanece presionado, como un selector de alineación.

1639Joined action barBotonesUna fila de botones soldados en una barra con costuras finas colapsadas, redondeadas solo en los extremos exteriores y un segmento cuadrado final que abre un menú adicional.

2641Border brighten buttonBotonesUn botón oscuro cuyo marco de dos píxeles es la única parte móvil: sube a blanco al pasar el mouse y colapsa en un anillo interior apretado mientras se mantiene presionado el botón.

2645Double bevel buttonBotonesUn botón pálido que se lee como una tecla moldeada gracias a dos sombras interiores opuestas, una oscura desde arriba y otra brillante desde abajo, que se encuentran detrás de una fría rampa gris.

2534Elevated chip buttonBotonesUn chip pálido y redondeado que descansa sobre sombras suaves apiladas que se tiñen hacia el acento al pasar el mouse y se hunden en una sombra más profunda con un contorno acentuado cuando se presiona.

1710Icon label toolbarBotonesUna barra de herramientas compacta de botones de íconos silenciosos, cada uno dibujado con su propio tono, con un botón de retroceso cuya etiqueta se despliega fuera del ícono al pasar el mouse.