Acciones
Button
Ejecuta una acción con estados claros de carga y desactivación.
Importación
import { NeuButtonComponent } from '@neural-ui/native/button';Ejemplos
Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.
Acciones del proyecto
Edita el nombre, consulta la vista previa y guarda los cambios. La acción principal está disponible cuando hay algo que guardar.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuModalComponent } from '@neural-ui/native/modal';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, NeuInputComponent, NeuBadgeComponent, NeuModalComponent, View, Text, ScrollView],
template: `
<scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Dale tu toque</text><text class="product-caption">Espacio del producto</text></view>
<view class="product-surface"><neu-input requiredLabel="Obligatorio" label="Nombre del proyecto" [(value)]="name" placeholder="Escribe el nombre del proyecto" />
<text class="product-caption">Un nombre claro ayuda al equipo a encontrar el trabajo adecuado.</text>
<view class="product-actions"><neu-button label="Guardar cambios" size="sm" [disabled]="!name().trim() || name().trim() === savedName()" (pressed)="savedName.set(name().trim())" /><neu-button label="Vista previa" size="sm" variant="text" (pressed)="preview.set(true)" /></view>
<text class="product-caption" accessibilityLiveRegion="polite">{{ name().trim() === savedName() ? 'Cambios guardados' : 'Cambios sin guardar' }}</text></view>
<neu-modal closeLabel="Cerrar diálogo" title="Vista previa del proyecto" [(open)]="preview"><view class="product-section"><neu-badge label="Borrador" tone="neutral" /><text class="product-heading">{{ name().trim() || 'Proyecto sin nombre' }}</text><text>Invita a tu equipo y planifica el primer hito.</text></view></neu-modal></view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
`,
})
export class ExampleComponent {
readonly name = signal('Lanzamiento móvil');
readonly savedName = signal('Lanzamiento móvil');
readonly preview = signal(false);
}Variantes
Compara cuatro acabados visuales y pulsa una acción para actualizar el contador.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="usage-buttons">
<neu-button label="Guardar cambios" variant="solid" (pressed)="saved.set(saved() + 1)" />
<neu-button label="Vista previa" variant="tonal" (pressed)="saved.set(saved() + 1)" />
<neu-button label="Cancelar" variant="outline" (pressed)="saved.set(saved() + 1)" />
<neu-button label="Más información" variant="text" (pressed)="saved.set(saved() + 1)" />
</view><text class="usage-caption">Acciones: {{ saved() }}</text>
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.usage-buttons { gap: 12px; align-items: flex-start; }
`,
})
export class ExampleComponent {
readonly saved = signal(0);
}Colores semánticos
Compara los seis colores semánticos que proporciona el tema.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="usage-buttons">@for (tone of tones; track tone) {
<neu-button [label]="tone" [tone]="tone" (pressed)="saved.set(saved() + 1)" />
}</view><text class="usage-caption">Acciones: {{ saved() }}</text>
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.usage-buttons { gap: 12px; align-items: flex-start; }
`,
})
export class ExampleComponent {
readonly saved = signal(0);
readonly tones = ['brand', 'neutral', 'success', 'info', 'warning', 'danger'] as const;
}Tamaños
Compara sm, md y lg con la misma etiqueta.
Ver y copiar el ejemplo completo
import { Component } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { View, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, View, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="usage-buttons"><neu-button label="Continuar" size="sm" /><neu-button label="Continuar" size="md" /><neu-button label="Continuar" size="lg" /></view>
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.usage-buttons { gap: 16px; align-items: flex-start; }
`,
})
export class ExampleComponent {
}Carga y desactivado
Inicia o detén el estado de guardado y compáralo con una acción no disponible.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { View, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, View, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="usage-buttons"><neu-button label="Guardando cambios" [loading]="saving()" /><neu-button label="Acción no disponible" [disabled]="true" /><neu-button label="Alternar carga" variant="text" (pressed)="saving.set(!saving())" /></view>
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.usage-buttons { gap: 12px; align-items: flex-start; }
`,
})
export class ExampleComponent {
readonly saving = signal(true);
}Ancho completo
Permite que la acción principal ocupe el ancho disponible de su contenedor.
Ver y copiar el ejemplo completo
import { Component } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { View, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, View, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<neu-button label="Continuar" [fullWidth]="true" /><neu-button label="Cancelar" variant="text" />
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
`,
})
export class ExampleComponent {
}Playground interactivo
Ajusta la configuración y prueba el resultado.
Capturas del dispositivo en inglés.
Referencia API
Inputs
| Nombre | Tipo | Predeterminado | Enlace | Descripción |
|---|---|---|---|---|
| label | string | Obligatorio | Input | Nombre legible del control, acción o grupo. |
| accessibilityLabel | string | '' | Input | Nombre accesible de la acción. Si está vacío, Button utiliza su etiqueta visible. |
| variant | NeuVariant | 'solid' | Input | Jerarquía visual: solid, tonal, outline o text. Los colores proceden del tema que lo contiene. |
| tone | NeuTone | 'brand' | Input | Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color. |
| size | NeuSize | 'md' | Input | Los tamaños sm, md y lg tienen alturas mínimas de 48, 56 y 64 puntos y etiquetas de 14, 16 y 18 puntos. Al ampliar el texto puede crecer la altura. Usa fullWidth para ocupar el ancho del padre. |
| fullWidth | boolean | false | Input | Ocupa el ancho disponible del contenedor padre. El valor false recupera el ancho natural del contenido; size sigue controlando la altura y la tipografía. |
| disabled | boolean | false | Input | Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores. |
| loading | boolean | false | Input | Muestra el indicador nativo de carga e impide activar Button o IconButton. |
Models
Este componente no declara models bidireccionales.
Outputs
| Nombre | Payload | Cuándo se emite |
|---|---|---|
| pressed | TouchEvent | Emite el evento de pulsación nativo al activar una acción habilitada. |
Tipos e interfaces de datos
Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.
NeuVariant
import type { NeuVariant } from '@neural-ui/native/foundation';
// Public definition for reference only. Import this type; do not redeclare it.
export type NeuVariant = 'solid' | 'tonal' | 'outline' | 'text';NeuTone
import type { NeuTone } from '@neural-ui/native/foundation';
// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';NeuSize
import type { NeuSize } from '@neural-ui/native/foundation';
// Public definition for reference only. Import this type; do not redeclare it.
export type NeuSize = 'sm' | 'md' | 'lg';TouchEvent
import type { TouchEvent } from '@ng-native/components';
import type { NativeSyntheticEvent } from '@ng-native/fabric';
import type { TouchEventPayload } from '@ng-native/components';
// Public definition for reference only. Import this type; do not redeclare it.
export type TouchEvent = NativeSyntheticEvent<TouchEventPayload>;NativeSyntheticEvent
import type { NativeSyntheticEvent } from '@ng-native/fabric';
// Public definition for reference only. Import this type; do not redeclare it.
export interface NativeSyntheticEvent<T = unknown> {
readonly nativeEvent: T;
/**
* The node the event happened on, which a listener further up can compare with its own: RN's
* `event.target`. Null where a host has no node to name.
*/
readonly target?: unknown;
stopPropagation(): void;
isPropagationStopped(): boolean;
}TouchEventPayload
import type { TouchEventPayload } from '@ng-native/components';
import type { TouchPayload } from '@ng-native/fabric';
// Public definition for reference only. Import this type; do not redeclare it.
export interface TouchEventPayload extends TouchPayload {
readonly touches?: readonly TouchPayload[];
readonly changedTouches?: readonly TouchPayload[];
}TouchPayload
import type { TouchPayload } from '@ng-native/fabric';
// Public definition for reference only. Import this type; do not redeclare it.
export interface TouchPayload {
readonly pageX?: number;
readonly pageY?: number;
readonly locationX?: number;
readonly locationY?: number;
readonly identifier?: number;
readonly target?: number;
readonly timestamp?: number;
}