Pulsante

Un pulsante è la cosa che una persona clicca per far succedere qualcosa. button() renderizza un vero <button> con type="button", così metterne uno dentro un form non lo invia per sbaglio.

Pulsante di base

Il predefinito è un pulsante solido, primary, medio. I figli sono l’etichetta; tutto il resto è una prop.

stack({ direction: 'row', gap: 'md' },
  button('Uno'),
  button('Due'),
  button('Tre'),
)

Varianti

Cinque livelli di enfasi, dall’unica chiamata all’azione della pagina fino a qualcosa che si legge come un link.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Colori

Ogni componente a tema attinge dalle stesse cinque palette, così un pulsante color: 'danger' e un avviso color: 'danger' vanno d’accordo senza che nessuno dei due sappia dell’altro.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Dimensioni

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Piccolo'),
  button({ size: 'md' }, 'Medio'),
  button({ size: 'lg' }, 'Grande'),
)

Icone

Passa qualunque markup SVG come startIcon o endIcon. Le icone sono dimensionate in em, quindi scalano con il pulsante invece di aver bisogno di una dimensione propria.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Nuova pagina'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Continua'),
)

Pulsante-icona

iconButton() è un pulsante quadrato che contiene una sola icona. La sua label è obbligatoria — diventa il nome accessibile che l’icona da sola non può fornire, e il tooltip al passaggio del mouse.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Aggiungi', icon: icon('plus') }),
  iconButton({ label: 'Modifica', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Elimina', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

In caricamento e disattivato

loading mette al posto dell’icona una rotella e imposta aria-busy, lasciando l’etichetta al suo posto così il pulsante non cambia larghezza a metà azione.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Salvataggio'),
  button({ variant: 'outline', loading: true }, 'Controllo'),
  button({ disabled: true }, 'Disattivato'),
  button({ variant: 'soft', disabled: true }, 'Disattivato'),
)

Link

Dai a un pulsante un href e renderizzerà invece un <a> — l’elemento giusto per qualcosa che naviga. Le ancore non hanno uno stato disattivato, quindi disabled diventa aria-disabled e la toglie dall’ordine di tabulazione.

Leggi la documentazione Componenti Link semplice

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/docs' }, 'Leggi la documentazione'),
  button({ href: '/docs/ui', variant: 'outline' }, 'Componenti'),
  button({ href: '/docs', variant: 'link' }, 'Link semplice'),
)

Piena larghezza

button({ block: true, size: 'lg' }, 'Pubblica il sito')

Props

Tutto ciò che non è elencato qui passa all’elemento renderizzato come attributo — id, data-*, onclick, popovertarget e via dicendo.

Prop	Tipo	Predefinito	Descrizione
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Quanta enfasi porta il pulsante.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Da quale palette attingere.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altezza, spazio interno e dimensione dell’etichetta.
`href`	`string`	—	Renderizza un <a> invece di un <button>.
`startIcon`	`string`	—	Markup posto prima dell’etichetta.
`endIcon`	`string`	—	Markup posto dopo l’etichetta.
`loading`	`boolean`	`false`	Mostra una rotella e imposta aria-busy.
`disabled`	`boolean`	`false`	Disattiva il pulsante, o marca un link come aria-disabled.
`block`	`boolean`	`false`	Si allunga a tutta la larghezza del contenitore.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Solo per la forma <button>.

iconButton() accetta le stesse props più una label obbligatoria e un’icon.