HoldButton: componente de React

Ejemplos

Mantener para confirmar

Mantén presionado con el puntero, Espacio o Enter; el relleno crece y la acción corre cuando se llena.

Nothing deleted yet

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

start

center

between

start

end

center

pill

rounded

square

xs

sm

md

lg

xl

neutral

accent

success

warning

danger

info

ghost

primary

secondary

soft

text

dashed

danger

link

Justifyjustify
Loading PositionloadingPosition
Shapeshape
Sizesize
Tonetone
Variantvariant

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Disabled

Claro

Habilitado

Hover

Foco

Presionado

Disabled

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Medidas

Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.

Cada tamaño y espacio es múltiplo de 4 px.

Props

`HoldButton` props

Ver 10 props heredadas

Mantener para confirmar (el patrón hold): un relleno crece mientras se presiona, con el puntero, Espacio o Enter, y la acción corre cuando se llena. Para acciones destructivas sin un diálogo.

Prop	Tipo	Por defecto	Descripción
`onConfirm`obligatoria	`() => void`	-	Se ejecuta cuando el botón se mantuvo presionado todo el tiempo.
`duration`	`number`	`1200`	Cuánto tiempo mantener, en ms. Por defecto 1200.
`fullWidth`	`Responsive<boolean>`	-	Se estira al ancho de su contenedor. Puede cambiar por breakpoint: { base: true, md: false } es de ancho completo solo en teléfonos.
`hint`	`string`	-	Lo leen los lectores de pantalla después de la etiqueta. Por defecto "Mantén presionado para confirmar".
`href`	`string`	-	Convierte el botón en un enlace con aspecto de botón.
`iconEnd`	`ReactNode`	-	Ícono después de la etiqueta.
`iconStart`	`ReactNode`	-	Ícono antes de la etiqueta.
`justify`	`"start" \| "center" \| "between"`	-	Cómo se ubica el contenido en un botón ancho: center (por defecto), start, o between (etiqueta a la izquierda, ícono final a la derecha).
`loadingLabel`	`ReactNode`	-	Texto a mostrar junto al spinner mientras carga. Sin él, el spinner cubre la etiqueta.
`loadingPosition`	`"start" \| "end" \| "center"`	-	Dónde va el spinner mientras carga: center (cubre la etiqueta, por defecto), start o end (toma el lugar del ícono).
`rel`	`string`	-	Con href: la relación del enlace.
`ripple`	`boolean`	-	Una onda crece desde el puntero al presionar (el patrón ripple).
`shape`	`"pill" \| "rounded" \| "square"`	-	pill (por defecto), rounded (8 px) o square (esquinas de 4 px).
`shortcut`	`ReactNode`	-	Un atajo de teclado mostrado al final, como ⌘S (también se define como aria-keyshortcuts cuando es texto).
`size`	`Responsive<"xs" \| "sm" \| "md" \| "lg" \| "xl">`	-	xs 28 px, sm 32 px, md 40 px (por defecto), lg 48 px, xl 56 px. Puede cambiar por breakpoint: { base: 'lg', md: 'md' }.
`successLabel`	`ReactNode`	-	La etiqueta mientras isSuccess. Por defecto "Listo".
`target`	`string`	-	Con href: dónde abrirlo.
`tone`	`"danger" \| "neutral" \| "accent" \| "success" \| "warning" \| "info"`	-	El color de los botones soft, ghost, text, dashed y link, y de un primary sólido: neutral (por defecto), accent, success, warning, danger o info.
`variant`	`"ghost" \| "primary" \| "secondary" \| "soft" \| "text" \| "dashed" \| "danger" \| "link"`	`'danger'`	primary: el botón con degradado oscuro (sólido en su tono cuando hay tone); secondary: el chip (blanco sobre oscuro, negro sobre claro); soft: con tinte; ghost: con contorno; text: sin borde hasta el hover; dashed: contorno discontinuo; danger: destructivo; link: solo texto.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: justifystartcenterbetween
loadingPositionstartendcenter
shapepillroundedsquare
tonedangerneutralaccentsuccesswarninginfo
variantghostprimarysecondarysofttextdasheddangerlink
Motion: hold
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-hold

Funciona con el puntero, Espacio y Enter: mantener la tecla lo llena, soltar antes cancela.
Su descripción dice "Mantén presionado para confirmar" (cámbiala con hint).
Con movimiento reducido el relleno sigue creciendo (es el progreso), sin otro movimiento.

Teclado

Tecla	Acción
`Tab`	Lleva el foco al botón
`Espacio` o `Enter (mantener)`	Lo llena; suelta antes del final para cancelar

Qué hacer y qué evitar

Hacer

Úsalo para acciones difíciles de deshacer pero tan comunes que un diálogo molestaría.
Di lo que pasa en la etiqueta: Eliminar proyecto.

Evitar

No lo uses para acciones rutinarias.
No hagas la duración mayor a 1,5 segundos aproximadamente.