Button

Visión general

Usa un botón nativo para una acción inmediata. NeuButton añade inputs signal para tono, variante visual, tamaño, carga y posición del icono sin perder la semántica nativa. Usa un enlace para navegar y un control de selección para elecciones persistentes; este componente no gestiona estado de formulario ni selección.

Interacción básica

Importa Button y escucha neuClick para ejecutar una acción. Prueba el botón y abre Código para copiar el ejemplo completo.

Estados y variantes

Usa tone para el color semántico: neutral, success, info, warning o danger. brand sigue disponible para la acción principal. Los seis tonos admiten las variantes solid, outline y ghost. size cambia las dimensiones del control. El estado de carga impide la activación e informa de que la acción está en curso.

Tamaños y anchos

size elige las dimensiones sm, md o lg del control; no es un input de ancho. Un Button normal se ajusta al contenido. fullWidth=true hace que ocupe la superficie contenedora.

Para un ancho fijo o responsive de la aplicación, utiliza CSS como inline-size: min(100%, 240px). No existe un input width que conectar. iconOnly usa dimensiones cuadradas según size; separa ese modo de una acción de texto a ancho completo.

<button neu-button>Fit content</button>
<button neu-button [fullWidth]="true">Fill container</button>
<button neu-button style="inline-size: min(100%, 240px)">CSS width</button>

Iconos

Elige una de dos formas de integración: asigna al input icon una clave de aplicación que resuelva provideNeuIconResolver, o coloca un componente de icono o un SVG directamente dentro del botón. La proyección no necesita el input icon ni un resolver de Core. Neural Icons es una opción, no un requisito; Core sigue siendo independiente de la librería de iconos.

Con el input icon, iconPosition selecciona start o end. Con contenido proyectado, coloca el icono antes o después del texto en el template. La clave add también tiene un dibujo de respaldo mínimo en Button que funciona sin resolver; las demás claves de aplicación necesitan un resolver y no cargan automáticamente un catálogo de iconos.

Para una acción solo con icono, usa iconOnly con cualquiera de las dos formas, omite el texto visible y proporciona ariaLabel. iconOnly aplica dimensiones cuadradas; no elimina el contenido proyectado. La demo muestra estas opciones y sus pestañas de TypeScript, HTML y provider contienen el código que las ejecuta.

Contrato de iconos

Configura Button

Cambia apariencia, texto, icono, ancho y estado de interacción, y copia el código del componente. El resultado utiliza los mismos valores que el template generado. Activa el botón habilitado para ver el contador de neuClick.

Las opciones de ancho distinguen el input fullWidth de Core de un inline-size CSS. Los iconos de aplicación muestran además los providers que necesitan; Add puede usar el fallback sin esa configuración.

<button neu-button>Guardar cambios</button>

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/core/button';

@Component({
  selector: 'app-configured-button',
  standalone: true,
  imports: [NeuButtonComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      neu-button
      [variant]="config.variant"
      [size]="config.size"
      [tone]="config.tone"
      [disabled]="config.disabled"
      [loading]="config.loading"
      [fullWidth]="config.fullWidth"
      [iconOnly]="config.iconOnly"
      [iconPosition]="config.iconPosition"
      [icon]="config.icon"
      [style.inline-size]="config.cssWidth === null ? null : 'min(100%, ' + config.cssWidth + 'px)'"
      [ariaLabel]="config.ariaLabel"
      (neuClick)="clicks.update(increment)"
    >
      {{ config.iconOnly ? '' : config.content }}
    </button>
    <output aria-live="polite">Interactions: {{ clicks() }}</output>
  `,
})
export class ConfiguredButton {
  readonly config = {
    "variant": "solid",
    "size": "md",
    "tone": "brand",
    "disabled": false,
    "loading": false,
    "fullWidth": false,
    "iconOnly": false,
    "iconPosition": "start",
    "icon": null,
    "content": "Guardar cambios",
    "ariaLabel": "Guardar cambios",
    "cssWidth": null
  } as const;
  readonly clicks = signal(0);
  readonly increment = (count: number) => count + 1;
}

Accesibilidad y teclado

Core se encarga de la activación nativa por teclado, los estados deshabilitado/cargando y el atributo de estado ocupado.

Tu aplicación proporciona una etiqueta clara para la acción. En un botón solo con icono, define ariaLabel. Oculta los iconos decorativos proyectados a las tecnologías de asistencia.

API

Los inputs configuran el estado aplicado: utiliza [propiedad]="valor" para un valor dinámico o un atributo literal para una cadena fija. Button tiene diez inputs y no mantiene un modelo de valor editable. Su texto visible se proyecta entre las etiquetas de apertura y cierre; no existe un input label.

El output neuClick emite un MouseEvent al activar un botón habilitado. Escúchalo con (neuClick)="save($event)". El evento no gobierna disabled ni loading: tu aplicación gestiona la operación y devuelve el estado actual a Button.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuButtonIconPosition } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonIconPosition = 'start' | 'end';

import type { NeuButtonSize } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonSize = 'sm' | 'md' | 'lg';

import type { NeuButtonTone } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuButtonVariant } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonVariant = 'solid' | 'outline' | 'ghost';

Tematización

Usa los tokens públicos --neu-button-* siguientes o un preset reutilizable de la guía Temas. Limita los cambios locales a la superficie de la aplicación que quieras personalizar.

Componentes relacionados

Button group es el compañero de disposición; no añade estado de selección a Button.

• ButtonGroup