Botones

Molded bevel button

Molded bevel button: Un botón de losa de esquinas duras con cuatro bandas biseladas insertadas, una sombra desplazada sin desenfoque y una prensa que lo deja caer al ras de la superficie.

Cómo usar Molded bevel button

Molded bevel 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`	`Insert coin`	Hasta 24 caracteres
`accent`	`color`	`#9BE15D`	Los metadatos no indican otro límite.
`bevelWidth`	`number`	`4`	De 2 a 10; paso 1
`dropDepth`	`number`	`4`	De 0 a 12; paso 1
`uppercase`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Molded bevel button?

Molded bevel 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 Molded bevel button?

Los metadatos de React indican estas dependencias npm además de React: clsx, tailwind-merge.

¿Qué detalles de accesibilidad se observan en Molded bevel button?

El código React de Molded bevel 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 Molded bevel button el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Molded bevel 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 Bevel press pill de Fieldbook, de la categoría Botones.

2708Bevel press pillBotonesUna pastilla oscura biselada con un chip redondo empotrado en su extremo que se hunde en la superficie cuando se presiona.

Imagen fija del componente Dialog bevel button de Fieldbook, de la categoría Botones.

2509Dialog bevel buttonBotonesUn pequeño botón de sistema gris construido a partir de dos biseles duros anidados y una marca de enfoque interna punteada, cuyas líneas de bisel se intercambian al presionar para que se lea como si estuviera presionado.

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

2640Arrow chip buttonBotonesUn botón de acción redondeado con un chip de flecha brillante acoplado en su extremo derecho que se levanta de la página al pasar el mouse con una sombra desplazada y se hunde al presionarlo.

Imagen fija del componente Bevel frame button de Fieldbook, de la categoría Botones.

2674Bevel frame buttonBotonesUn botón con marco cuadrado cuyos dos extremos se biselan en puntos al pasar el mouse, convirtiendo el rectángulo en una insignia de seis lados.

Imagen fija del componente Cartridge fire button de Fieldbook, de la categoría Botones.

2312Cartridge fire buttonBotonesUn botón novedoso con forma de carcasa de latón, con un proyectil escondido detrás de su nariz que se dispara y recarga cuando se presiona.

Imagen fija del componente Edge Collapse Button de Fieldbook, de la categoría Botones.

1852Edge Collapse ButtonBotonesUn botón plano con un labio grueso de color a lo largo de su borde inferior que se pliega hasta formar una línea de cabello cuando el botón cae sobre él.