# Reglas de uso > Las decisiones que no se ven en una tabla de props. Las decisiones que no se ven en una tabla de props. Cada una existe porque romperla se nota. ## Jerarquía **Un solo acento por pantalla.** `Button variant="accent"` o `Switch variant="accent"` para la acción principal; el CTA por defecto es el negro (`variant="default"`). Dos acentos compitiendo no son dos acciones importantes: son ninguna. **`shape="pill"` solo en los CTA de un hero o de una sección de marketing.** Es `rounded-full` con un escalón más de padding horizontal (`sm` 20px, `md` 24px, `lg` 28px). **Nunca en el chrome de una app** —nav, tablas, formularios, diálogos—: dos formas de botón en la misma pantalla se leen como un descuido, no como una jerarquía. En `icon-*` se ignora, que ya es cuadrado con su propio radio. **`variant="destructive"` solo cuando la acción borra algo**, y siempre detrás de un `AlertDialog`. ## Links **Links con forma de botón o card:** `buttonVariants()` / `cardVariants()` sobre `` o ``. **No uses `render` para links:** Base UI les pone `role="button"` y dejan de ser links para un lector de pantalla. **Links de texto:** `linkVariants({ variant })`. | Variante | Cuándo | |---|---| | `inline` | Dentro de una frase. Subrayado siempre: una línea tenue que se refuerza en hover. | | `subtle` | Suelto y secundario. Sin subrayado en reposo; en hover sube a `gray-1000` y aparece la línea. | | `row` | El nombre clickeable de una fila de tabla. | Traen `rounded-sm`, `transition-control`, `focus-visible:focus-ring` y `underline-offset-4`: no los repitas en el llamador. `icon: true` alinea una flecha con el texto. **Un link que solo se revela en hover no existe en un celular.** Si es la acción principal de la sección, va `inline`. ## Menús y navegación **`NavigationMenu` si los ítems navegan, `DropdownMenu` si ejecutan algo.** No es cosmético: `DropdownMenu` emite `role="menu"` / `role="menuitem"`, atrapa el foco y se recorre con las flechas, así que un lector anuncia «menú, 3 elementos» en vez de una lista de links, y el modo de navegación por links no los ve. El menú de idioma y el de usuario siguen siendo `DropdownMenu` (cambian el estado, no la página). **`DropdownMenuLabel` va dentro de `DropdownMenuGroup`.** Suelto, Base UI tira la página abajo. **`NavigationMenuViewport` va una sola vez**, hermano de la lista: el panel es uno para todos los ítems. ## Superposiciones **Los triggers usan `render={