IconButton | Neural Native

Importación

component.ts

import { NeuIconButtonComponent } from '@neural-ui/native/icon-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 rápidas

Acciones compactas con nombre accesible añaden y eliminan filas reales. Eliminar se desactiva al vaciar la lista; los ejemplos siguientes comparan tonos y jerarquía visual.

Ver y copiar el ejemplo completo

quick-actions.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, NeuCheckboxComponent, 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">Pequeñas acciones, avances reales</text><text class="product-caption">Prepara las tareas del lanzamiento</text></view>
    <view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Tareas del lanzamiento</text><text class="product-caption">{{ tasks().length }} tareas en tu lista</text></view>
    <neu-icon-button label="Añadir tarea" [svg]="addIcon" size="sm" variant="tonal" (pressed)="addTask()" /><neu-icon-button label="Eliminar la última tarea" [svg]="removeIcon" size="sm" variant="text" tone="danger" [disabled]="!tasks().length" (pressed)="removeTask()" /></view>
    @for (task of tasks(); track task.id) { <neu-checkbox [label]="task.label" /> }
    @if (!tasks().length) { <text class="product-caption">Añade una tarea para comenzar.</text> }</view></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 addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly removeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /></svg>';
  readonly tasks = signal([{ id: 1, label: 'Revisar la bienvenida' }, { id: 2, label: 'Preparar las notas del lanzamiento' }]);
  private nextId = 3;
  addTask() { const id = this.nextId++; this.tasks.update(tasks => [...tasks, { id, label: 'Nueva tarea del lanzamiento' + ' ' + id }]); }
  removeTask() { this.tasks.update(tasks => tasks.slice(0, -1)); }
}

Colores semánticos

Compara los seis colores semánticos que proporciona el tema.

Ver y copiar el ejemplo completo

semantic-colors.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row">@for (tone of tones; track tone) {
    <neu-icon-button [label]="'Añadir tarea: ' + tone" [svg]="addIcon" [tone]="tone" variant="solid" (pressed)="added.set(added() + 1)" />
    }</view>
    </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; }


  `,
})
export class ExampleComponent {
  readonly addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly added = signal(0);
  readonly tones = ['brand', 'neutral', 'success', 'info', 'warning', 'danger'] as const;
}

Jerarquía visual

Compara los acabados solid, tonal, outline y text.

Ver y copiar el ejemplo completo

visual-hierarchy.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <view class="usage-row">@for (variant of variants; track variant) {
    <neu-icon-button [label]="'Añadir tarea: ' + variant" [svg]="addIcon" [variant]="variant" (pressed)="added.set(added() + 1)" />
    }</view>
    </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; }


  `,
})
export class ExampleComponent {
  readonly addIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>';
  readonly added = signal(0);
  readonly variants = ['solid', 'tonal', 'outline', 'text'] as const;
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

AndroidCaptura nativa

iOSCaptura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
svg	string	Obligatorio	Input	String con el SVG del icono. El valor currentColor permite aplicar el color del tema mediante el renderizador nativo.
variant	NeuVariant	'tonal'	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.
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

NeuVariant.ts

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

NeuTone.ts

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';

TouchEvent

TouchEvent.ts

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

NativeSyntheticEvent.ts

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

TouchEventPayload.ts

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

TouchPayload.ts

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;
}