Botones

Uppercase action button

Uppercase action button: Un botón de acción compacto y relleno con una etiqueta con seguimiento en mayúsculas, esquinas cuadradas y estados silenciosos de solo relleno y de desplazamiento para barras de herramientas y encabezados de paneles.

Cómo usar Uppercase action button

Uppercase action button 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`	`Manage plan`	Hasta 28 caracteres
`accent`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`tracking`	`number`	`0.5`	De 0 a 2; paso 0.1
`uppercase`	`boolean`	`true`	Los metadatos no indican otro límite.
`disabled`	`boolean`	`false`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Uppercase action button?

Uppercase action button 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 Uppercase action button?

Los metadatos de React indican estas dependencias npm además de React: clsx.

¿Qué detalles de accesibilidad se observan en Uppercase action button?

El código React de Uppercase action button incluye: elementos nativos (button). 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 Uppercase action button el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Uppercase action button. 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 Lifting share chip de Fieldbook, de la categoría Botones.

2480Lifting share chipBotonesUn pequeño chip sólido con un glifo y una etiqueta de mayúsculas cortas que levanta unos cuantos píxeles y se suaviza al pasar el cursor, se asienta cuando se presiona y puede alternar entre un glifo relleno.

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 Color swap play button de Fieldbook, de la categoría Botones.

1849Color swap play buttonBotonesUna píldora de juego en mayúsculas que intercambia sus colores de fondo y de texto al pasar el mouse, elevándose a medida que su brillo de color se vuelve oscuro.

Imagen fija del componente Elevated chip button de Fieldbook, de la categoría Botones.

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.

Imagen fija del componente Hard Shadow Button de Fieldbook, de la categoría Botones.

1864Hard Shadow ButtonBotonesUn botón de contorno grueso que levanta su sólida sombra desplazada al pasar el mouse y vuelve a presionarla al hacer clic.

Imagen fija del componente Inset sheen button de Fieldbook, de la categoría Botones.

2699Inset sheen buttonBotonesUn botón de utilidad pálido con un borde fino, un resaltado de un píxel a lo largo de su borde superior y un estado presionado que invierte el brillo hacia adentro.