# Botón
> El botón de cristal fluido: el reflejo persigue al cursor en vez de saltar a él.
Paquete: `@pantherkit/design-system` · Archivo: `src/components/boton.css`
Se importa con:
```css
@import "@pantherkit/design-system/tokens.css"; /* siempre antes */
@import "@pantherkit/design-system/components.css";
```
La pieza se entrega como CSS, no como componente React: se aplica poniendo
las clases en tu propio marcado. No hay import de JavaScript que hacer.
## Qué es
La primera pieza que nace en el sistema y baja a los productos, en vez de al revés. Es cristal, no una pastilla sólida: el mismo material que la barra, y por eso el primario es blanco esmerilado y no blanco plano.
«Fluido» no es adorno del nombre. El reflejo especular no salta a la posición del cursor: la persigue con retardo, y ese retardo es lo que hace que la luz se lea como algo que fluye por dentro del cristal y no como un foco pegado al puntero. Se consigue registrando `--fx`/`--fy` con `@property` —sin registrar, una custom property es un token opaco y no se puede interpolar— y poniéndoles transición.
Se entrega como CSS y no como componente React a propósito: la landing es Astro sin React, y un botón no puede costarle a un sitio estático el peso de un framework. Los productos React envuelven esta misma clase.
## Clases
| Clase | Qué hace |
| --- | --- |
| `.fbtn` | La base. Cristal oscuro sobre tinta: la salida, la acción secundaria. |
| `.fbtn--primario` | La acción principal. Cristal blanco esmerilado con texto tinta: el elemento de más contraste de la página (~13:1), pero del mismo material que el resto. |
| `.fbtn--compacto` | Baja de 44px a 36px de alto. Para barras y fichas, donde el botón convive con texto de tamaño normal y no debe dominar. |
## Mandos
Custom properties que se redefinen desde fuera —con `style` o con una clase
propia— sin tocar el archivo del sistema.
| Propiedad | Por defecto | Qué controla |
| --- | --- | --- |
| `--fx / --fy` | `50% 50%` | La posición del reflejo. Registradas con @property, así que son interpolables y las mueve el guion del puntero. Sin guion se quedan en el centro y el botón funciona igual. |
## El marcado
Esto es exactamente lo que se pinta en la página `/componentes/boton`:
el mismo texto se inyecta ahí como pieza viva y se imprime aquí. No pueden
separarse.
### La jerarquía completa
Un primario por bloque y ni uno más. Dos acciones principales juntas no son dos: son ninguna, porque el ojo ya no sabe cuál es la que importa. El secundario es la salida, y existe para que el primario signifique algo.
```html
```
### Compacto, en una barra
En una barra de navegación el botón comparte línea con enlaces de texto. A 44px de alto se convierte en el objeto más pesado de la barra y la desequilibra; a 36px sigue siendo el elemento de más contraste sin gritar.
```html
```
### Sobre un elemento que navega de verdad
`.fbtn` no aporta semántica ni foco: es material. Si la acción navega, es un ``; si dispara algo en la página, es un `