Air / Button

Primer componente faro

Valida densidad, tipografia, variantes, iconografia, radios, loading, color, intent y comportamiento responsive sobre `terra.Button`.

6 variants 6 sizes color + intent Responsive props

Contract terra.Button + air recipe

Resolution {resolvedMode}

Playground

`color` elige la apariencia. `intent` comunica significado y, si existe, predomina sobre `color`.

Variant

{#each variants as item} {/each}

Color

{#each colors as item} {/each}

Intent

{#each intents as item} {/each}

Size

{#each sizes as item} {/each}

Rounded

{#each roundedValues as item} {/each}

Spinner placement

{#each placements as item} {/each}

Block width Icon only Loading

Label

`ButtonLabel` recibe texto ya resuelto. Si necesitas traduccion, resuelvela antes con `t(...)` o con el traductor que use tu pantalla.

\n\t{t('air.button.review')}\n`} > \n\tReview\n`} >

Variants

Las variantes base ya diferenciadas por peso visual y jerarquia.

{#each variants as item}

{item}

{/each}

Colors

`color` selecciona una paleta visual del sistema sin aportar significado extra.

{#each colors as item}

{/each}

Palette matrix

Lectura rapida para contrastar cada paleta en los pesos que mas nos importan. Sirve para detectar enseguida si `solid`, `soft`, `surface`, `outline` o `ghost` se quedan cortos.

{#each colors as item}

{item} {item}

{/each}

Intent

`intent` comunica semantica al usuario y siempre prevalece sobre `color`.

Sizes

Escala completa de densidad: dos pasos por debajo de `sm`, un paso tactil por encima de `lg`.

{#each sizes as item}

{item}

{/each}

Iconografia

La anatomia ya acepta `ButtonIcon` y `ButtonLabel`, con ejemplos claros de izquierda, derecha e icon-only.

Rounded

El radio es una prop del sistema y siempre resuelve contra tokens de `air`.

{#each roundedValues as item}

{item}

{/each}

Responsive

`size` y `rounded` ya aceptan objeto responsive. Reduce o amplia el viewport para comprobar el cambio.

Loading

Loading con spinner del sistema, texto estable, posicion configurable y variantes con icono.

States

Estados basicos para validar contraste y feedback visual.