Panoramica
Assegna al gruppo un nome accessibile e inserisci al suo interno i pulsanti correlati. Il gruppo unisce i bordi adiacenti e può applicare valori predefiniti per dimensione, variante e colore. I pulsanti mantengono i propri punti di tabulazione.Utilizzo
Proprietà dello stato
ButtonGroup coordina l’aspetto, non la selezione. Non dispone di una modalità di selezione controllata o non controllata. Ogni pulsante riceve il proprio gestore di azioni e lo stato dell’applicazione; consulta l’esempio di proprietà dello stato di Button per il comportamento di caricamento.
Per una scelta mutuamente esclusiva, usa RadioGroup, che gestisce la selezione per i relativi controlli radio.
Precedenza dell’aspetto
Ogni prop dell’aspetto viene risolta in modo indipendente: prima la prop esplicita dell’elemento figlio, poi il valore predefinito del gruppo, quindi il valore predefinito del componente. Questo si applica sia a Button sia a IconButton, incluso unIconButton size="xs" esplicito. I valori predefiniti raggiungono gli elementi figlio tramite frammenti, wrapper e ancore dei tooltip.
Un gruppo può fornire color="inherit" su una superficie colorata. Un elemento figlio che viene risolto in un colore ereditato deve essere risolto anche in una variante non uniforme. Le sostituzioni esplicite del colore e della variante dell’elemento figlio hanno la precedenza, quindi un elemento figlio può scegliere una variante non uniforme o un colore semantico quando il gruppo fornisce insieme uniforme e inherit.
Mantieni i pulsanti collegati della stessa dimensione affinché i bordi siano allineati. Questo esempio sovrascrive la variante e il colore ereditando la dimensione del gruppo.
Controlli separati
Impostaattached={false} per mantenere gli angoli arrotondati di ciascun controllo e uno spazio di 2px. I valori predefiniti del gruppo si applicano comunque tramite wrapper e ancoraggi dei tooltip; le proprietà esplicite dei figli hanno la precedenza.
Controlli con cornice
Impostaframed per aggiungere uno sfondo traslucido, un bordo, un padding di 2px e angoli concentrici. La cornice funziona con controlli collegati o separati e mantiene l’aspetto esplicito dei figli. Usa size="xs" su IconButton per azioni compatte da 20px.
Aggiornamento dei gruppi esistenti
SostituisciIconButtonGroup e il relativo array iconButtons con ButtonGroup framed attached={false} e figli espliciti. Sostituisci InsideButton con LightIconButton size="xs". Ogni pulsante dispone del proprio nome accessibile, gestore di azioni, stato disabilitato e tooltip facoltativo.
Props
boolean
predefinito:"true"
Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.
"accent" | "danger" | "inherit" | "neutral" | "success"
Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.
boolean
predefinito:"false"
Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."md" | "sm"
Default button height for children without an explicit size.
"ghost" | "link" | "outline" | "soft" | "solid"
Default surface treatment for children without an explicit variant.