Botones

Slide away destructive

Un botón destructivo cuya etiqueta se desliza hacia la izquierda para dejar solo una cruz, luego cambia a una cara de éxito con una marca de verificación por un momento cuando se presiona.

Hover to collapse the label, press to confirm.

Cómo usar Slide away destructive

Un botón destructivo cuya etiqueta se desliza hacia la izquierda para dejar solo una cruz, luego cambia a una cara de éxito con una marca de verificación por un momento cuando se presiona.

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, confirmColor, slideMs, confirmMs

¿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?

La vista previa y la descripción son públicas. Inicia sesión con una cuenta autorizada para abrir el código, las versiones y el panel de instalación.

Conecta tu agente

Relacionados

2628Icon takeover deleteBotonesUn botón destructivo dividido en una palabra en negrita y una celda de icono estrecha; Al pasar el cursor o enfocar, la celda crece en todo el botón hasta que solo queda el glifo, con dos toques para confirmar al tocar.

2696Destructive sweep buttonBotonesUna acción de eliminación cuyo sombreado de rosa a carmesí se desplaza de un extremo a otro al pasar el mouse, inclinando la tapa del contenedor, con una línea opcional de retención para confirmar a lo largo del borde inferior.

2551Staged expand delete buttonBotonesUn icono de contenedor cuadrado que se ensancha después de un breve retraso, desvanece su etiqueta y solicita un segundo clic de confirmación antes de dispararse.

2715Glide swap buttonBotonesUn botón de ancho fijo que desliza su etiqueta por el borde derecho mientras el glifo se desliza hacia el centro, todo ello asentado sobre una repisa de color duro sobre la que cae el botón cuando se presiona.

1707Hold ring confirmBotonesUn botón redondo rodeado por un trazo que se dibuja a sí mismo mientras lo mantienes presionado, ingresando un valor de progreso en el anillo, la escala del botón y el color de la etiqueta a la vez.

1636Hold to deleteBotonesUn botón destructivo que solo se activa después de mantener presionado el puntero el tiempo suficiente para que una barra de relleno lo recorra y rebobina en el momento en que lo sueltas.