Botones

Caret tail link

Caret tail link: Un enlace de texto silencioso con un pequeño corchete en ángulo justo después de su última letra, que se desliza hacia afuera y se subraya al pasar el mouse.

View release notes Open the changelog

Cómo usar Caret tail link

Caret tail link se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`label`	`text`	`View release notes`	Hasta 40 caracteres
`accent`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`direction`	`select`	`right`	Opciones: right, up-right, down
`travel`	`number`	`4`	De 0 a 12; paso 1
`underline`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Caret tail link?

Caret tail link está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Caret tail link?

Los metadatos de React no indican dependencias npm adicionales a React.

¿Qué detalles de accesibilidad se observan en Caret tail link?

El código React de Caret tail link incluye: elementos nativos (a, button); atributos y manejadores (aria-hidden). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Caret tail link el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Caret tail link. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Center out underline link de Fieldbook, de la categoría Botones.

1929Center out underline linkBotonesUn enlace de navegación cuyo subrayado crece hacia afuera desde el centro hasta ambos extremos al pasar el cursor y se retrae hasta un punto cuando el puntero se aleja.

Imagen fija del componente Nudging chevron button de Fieldbook, de la categoría Botones.

2632Nudging chevron buttonBotonesUn botón silencioso y teñido con acento cuya marca de chevrón espera en el espacio negativo, luego se desliza al pasar el mouse y empuja la etiqueta hacia un lado mientras la paleta se enfría a neutrales.

Imagen fija del componente Opposing rule text button de Fieldbook, de la categoría Botones.

2537Opposing rule text buttonBotonesUn botón de texto en mayúsculas sin bordes entre corchetes por dos reglas que barren desde extremos opuestos al pasar el cursor o enfocar y retroceden por donde vinieron.

Imagen fija del componente Amber upload pill de Fieldbook, de la categoría Botones.

2707Amber upload pillBotonesUna cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse.

Imagen fija del componente Arrow to label pill de Fieldbook, de la categoría Botones.

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.

Imagen fija del componente Arrow wipe call to action de Fieldbook, de la categoría Botones.

1629Arrow wipe call to actionBotonesUna llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic.