Badge | Neural Native

Importación

component.ts

import { NeuBadgeComponent } from '@neural-ui/native/badge';

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.

Etiqueta de estado

Usa badges para estados y categorías breves. Una acción separada cambia la revisión; los badges mantienen su función informativa.

Ver y copiar el ejemplo completo

status.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuBadgeComponent, 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">El estado, de un vistazo</text><text class="product-caption">Pocas palabras para mantener al equipo al día</text></view>
    <neu-card title="Lanzamiento móvil" description="Espacio del producto" variant="outlined"><view class="product-section"><view class="product-actions"><neu-badge [label]="ready() ? 'Listo para lanzar' : 'En curso'" [tone]="ready() ? 'success' : 'info'" /><neu-badge label="Móvil" tone="neutral" /></view>
    <text>Pule la bienvenida y prepara las notas finales del lanzamiento.</text>
    <view class="product-actions"><neu-button [label]="ready() ? 'Reabrir revisión' : 'Completar revisión'" size="sm" variant="text" (pressed)="ready.set(!ready())" /></view></view></neu-card></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 ready = signal(false);
}

Colores semánticos

Compara seis colores de estado con la paleta del tema.

Ver y copiar el ejemplo completo

semantic-colors.component.ts

import { Component } from '@angular/core';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuBadgeComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-row"><neu-badge label="brand" tone="brand" />
    <neu-badge label="neutral" tone="neutral" />
    <neu-badge label="success" tone="success" />
    <neu-badge label="info" tone="info" />
    <neu-badge label="warning" tone="warning" />
    <neu-badge label="danger" tone="danger" /></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 {

}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Badge · android · native capture — **Android**Captura nativa

Badge · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
tone	NeuTone	'neutral'	Input	Color semántico aplicado a la etiqueta y a un fondo suavemente teñido: neutral, brand, success, info, warning o danger. Los colores se actualizan con NeuTheme y sus tokens personalizados. El valor accent se mantiene como alias compatible de brand.

Models

Este componente no declara models bidireccionales.

Outputs

Este componente no declara outputs públicos.

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

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