Botones

Expanding icon pill

Un botón de ícono redondo que se extiende hasta convertirse en una píldora etiquetada al pasar el mouse, intercambiando su glifo por una palabra cuando llega un relleno de acento.

Cómo usar Expanding icon pill

Un botón de ícono redondo que se extiende hasta convertirse en una píldora etiquetada al pasar el mouse, intercambiando su glifo por una palabra cuando llega un relleno de acento.

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: label, accent, collapsed, expanded, cast

¿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

2469Arrow to label pillBotonesUn botón redondo de chevrón que se extiende hasta convertirse en una píldora ancha etiquetada al pasar el cursor, intercambiando la marca por una palabra mientras el relleno plano se convierte en una rampa de dos paradas.

2350Expanding chip back buttonBotonesUn botón de pastilla pálido cuyo chip decorativo se extiende a todo lo ancho al pasar el mouse, llevando su flecha hacia el otro lado mientras la etiqueta permanece en su lugar y se cubre.

2523Label swap slide buttonBotonesUna píldora con borde que intercambia todo su contenido al pasar el mouse: la fila en reposo se desliza hacia arriba y hacia afuera, mientras que una segunda fila con su propio ícono y color se desliza hacia adentro desde abajo.

1834Layer swap buttonBotonesDos capas redondeadas ancladas a una esquina cambian de tamaño al pasar el mouse, el relleno en reposo se colapsa en una semilla mientras la semilla crece para llenar el botón.

2580Overshoot icon buttonBotonesUna pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar.

2521Ring halo pill buttonBotonesUn botón tipo pastilla que mantiene un espacio claro alrededor de su núcleo de color, llena ese espacio con un anillo de acento iluminado al pasar el mouse o al enfocar el teclado, y se aprieta hacia adentro mientras se presiona.