GlassButton
GlassButton es un vidrio con su texto. Un button real e invisible, en la capa del bridge, lo hace alcanzable con Tab, activable con Enter y Espacio, y visible para un lector de pantalla.
Uso
<GlassButton label="Guardar" onclick={save} />
<GlassButton label="+" aria-label="Nuevo look" variant="secondary" width={40} height={40} radius={20} onclick={add} />Hay tres variantes (primary, secondary y ghost) y tres tamaños (sm, md y lg). onclick llega una vez por activación, por puntero o por teclado.
Costo
Ninguno en reposo: el bridge proyecta el botón invisible solo en los frames que se renderizan. Necesita EssentiaRoot.
Referencia de props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label | string | requerido | Texto del botón. También es su nombre accesible, salvo que haya aria-label. |
'aria-label' | string | — | Nombre accesible cuando el texto no se lee bien en voz alta (un botón con + o ···). Pisa a label para el lector de pantalla; lo que se dibuja sigue siendo label. |
width | number | 160 | Ancho del botón en píxeles. |
height | number | el del size (44 en md) | Alto del botón en píxeles. Pisa al del size. |
radius | number | el del size (22 en md) | Radio de esquinas en píxeles. Pisa al del size. |
fontSize | number | el del size en typography.size del tema (16 en md) | Tamaño de fuente del label en píxeles. Pisa al del size. |
variant | GlassButtonVariant | 'primary' | Variante visual del botón: qué material y color de texto del tema usa. |
size | GlassButtonSize | 'md' | Tamaño: alto / radio / fuente. sm 36 / 18 / 14, md 44 / 22 / 16, lg 52 / 26 / 18 (la fuente sale de typography.size del tema). |
disabled | boolean | false | Sin clicks ni foco (el ghost disabled sale del orden de Tab) y atenuado. |
tabindex | number | — | Posición en el orden de Tab (tabindex del ghost). Por defecto, el orden de montaje. |
x | number | — | Posición X (centro del botón). |
y | number | — | Posición Y (centro del botón). |
z | number | — | Z-index para ordenamiento de capas. |
onclick | (event: MouseEvent) => void | — | Activación del botón, una vez por activación: el click del puntero (raycast sobre el vidrio, con su MouseEvent nativo) o el click nativo del ghost <button> (Enter, Espacio o un lector de pantalla, con detail === 0). |