Component

Button

Semantic button with 4 variants, 3 sizes, animated loading state and full accessibility support (aria-disabled, role="button").

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

States

Icons

Variants

Sizes

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

@Component({
  imports: [NeuButtonComponent],
  template: `
    <!-- Solo texto / Text only -->
    <button neu-button>Default</button>
    <button neu-button variant="primary">Primary</button>

    <!-- Icono a la izquierda (por defecto) / Left icon (default) -->
    <button neu-button icon="lucidePlus">New</button>

    <!-- Icono a la derecha / Right icon -->
    <button neu-button icon="lucideArrowRight" iconPosition="right">Next</button>

    <!-- Solo icono (cuadrado) / Icon only (square) -->
    <button neu-button variant="ghost" icon="lucideTrash2" [iconOnly]="true" ariaLabel="Delete" />

    <!-- Loading / Loading -->
    <button neu-button [loading]="isLoading()" (click)="save()">Save</button>
  `
})
export class MyComponent {
  isLoading = signal(false);
  save() { /* ... */ }
}`