Component Button

Button — core-button

Pulsante standalone basato su Angular Material 3. Supporta tre varianti di stile e sette colori semantici.

---

Utilizzo

<!-- Default: filled, tertiary -->
<core-button icon="save" label="Salva" />

<!-- Colore esplicito -->
<core-button icon="delete" label="Elimina" color="error" />

<!-- Icon-only -->
<core-button icon="add" variant="icon" color="primary" />

<!-- Solo testo -->
<core-button label="Annulla" variant="text" color="secondary" />

<!-- Con tooltip -->
<core-button icon="download" tooltip="Scarica il report" />

---

Input

Input	Tipo	Default	Descrizione
icon	string	—	Nome dell'icona Material (es. 'save', 'delete')
label	string	—	Testo del pulsante
tooltip	string	''	Tooltip Material
variant	'icon' | 'text' | 'filled'	'filled'	Stile del pulsante
color	ButtonColor	'tertiary'	Colore del pulsante
disabled	boolean	false	Disabilita il pulsante

ButtonColor

type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warn' | 'error';

Valore	Sorgente colore
primary	Token Material --color-primary / --color-on-primary
secondary	Token Material --color-secondary / --color-on-secondary
tertiary	Token Material --color-tertiary / --color-on-tertiary
error	Token Material --color-error / --color-on-error
success	Tailwind green-600 / white
info	Tailwind sky-600 / white
warn	Tailwind amber-500 / black

---

Varianti

Variante	Directive Material	Descrizione
filled	matButton="filled"	Pulsante pieno con sfondo colorato
text	matButton="text"	Solo testo, sfondo trasparente
icon	matIconButton	Solo icona, 40×40 px, sfondo filled

---

Utilizzo con FormShell

Nella FormShellAction, se variant è omesso, il default è 'filled'. Se color è omesso, il default è 'tertiary'.

actions: FormShellAction[] = [
  {
    icon: 'save',
    label: 'Salva',
    onClick: () => this.form.submit(() => this.save()),
    // variant: 'filled', color: 'tertiary' — impliciti
  },
  {
    label: 'Annulla',
    variant: 'text',
    color: 'secondary',
    onClick: () => this.cancel(),
  },
];

---

Note tecniche

• ViewEncapsulation.None — le classi Tailwind sono nell'output globale components.css.
• I colori Material usano i token del color bridge (--color-* → --mat-sys-*), quindi si adattano automaticamente al tema attivo (gpa, cobalt, forest).
• I colori semantici (success, info, warn) sono classi Tailwind fisse, indipendenti dal tema.