Button

Panoramica

Il componente Button è un pulsante personalizzato basato su ButtonBase di Material-UI.

Importazione

import { Button } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
label	string	No	""	Testo da visualizzare all'interno del pulsante.
sx	SxProps	No	undefined	Stili personalizzati da applicare al pulsante.
severity	'primary' | 'secondary' | 'error' | 'warning' | 'success'	No	'primary'	Colore del pulsante, in base alla palette del tema.
variant	'contained' | 'outlined' | 'text'	No	'contained'	Variante visiva del pulsante.
icon	IconDefinition	No	undefined	Icona personalizzata da visualizzare accanto al testo.
iconPosition	'start' | 'end'	No	'end'	Posizione dell'icona rispetto al testo.
link	string	No	undefined	Al click del pulsante viene associato un link invece di una funzione (azione)
target	"_self" | "_blank"	No	'_self'	target del link; decide se il link apre su una nuova scheda o meno
contentPosition	'start' | 'center' | 'end'	No	'center'	Allineamento del contenuto all'interno del pulsante.
showDefaultIcon	boolean	No	false	Mostra un'icona standard in base alla severity se icon non è definita.
isFullWidth	boolean	No	false	Se true, il pulsante occuperà l'intera larghezza disponibile.
isFullWidthOnMobile	boolean	No	false	Se true, il pulsante occuperà l'intera larghezza disponibile su schermi mobile.
isLoading	boolean	No	false	Mostra un indicatore di caricamento al posto dell'icona.
isDisabled	boolean	No	false	Disabilita il pulsante, impedendo l'interazione.
type	'button' / 'reset' / 'submit'	No	'button'	Tipo del pulsante HTML.
onClick	() => void	No	undefined	Funzione chiamata al click del pulsante.

Esempi di utilizzo

Pulsante base

<Button label="Invia" onClick={() => console.log("cliccato")} />

Pulsante con variante e severità

<Button
  label="Elimina"
  severity="error"
  variant="outlined"
  onClick={handleDelete}
/>

Pulsante con icona personalizzata a sinistra

<Button
  label="Download"
  icon={faArrowDown}
  iconPosition="start"
  onClick={handleDownload}
/>

Pulsante con caricamento e larghezza completa

<Button
  label="Caricamento..."
  isLoading={true}
  isFullWidth={true}
/>

Comportamento

• Se isLoading è true, viene mostrato un caricamento (CircularProgress) al posto dell'icona.
• Se showDefaultIcon è true e non è stata passata un'icon, viene mostrata un'icona coerente con la severity.
• Il Pulsante disabilitato o in caricamento non reagisce al click.

Note aggiuntive

• Gli stili sono gestiti con sx di MUI e si adattano in base a variant e severity.
• Il componente utilizza ButtonBase per una maggiore personalizzazione dell'aspetto.

---