Panoramica
Usa il componente condivisoMainButton per un’azione prominente. Compone
Button con una superficie piena, elevazione, testo in semigrassetto
e spaziatura orizzontale di 12 px. Il colore predefinito è neutro e la dimensione è md.
Utilizzo
Opzioni visive
Confronta gli aspetti pieni e con contorno nelle dimensioni predefinita e piccola, oltre agli stati disabilitato e di caricamento.Gestione dello stato
MainButton usa il modello di stato di Button e non aggiunge uno stato proprio. L’applicazione fornisce loading e disabled; non sono disponibili modalità di selezione controllata e non controllata. Consulta l’esempio di gestione dello stato di Button per gestire un’azione asincrona.
Forme e larghezza
fullWidth o non fornisca uno stile di
layout dell’applicazione. Sovrascrivi variant, color, size e elevated secondo necessità;
ad esempio, usa variant="outline" e elevated={false} per un’azione con contorno.
Con color="inherit", scegli esplicitamente una variante non solid oppure ereditane una da ButtonGroup. Il valore predefinito solid autonomo con colore ereditato genera un errore di runtime.
Mantieni il layout della pagina nello stile dell’applicazione.
Interazione
MainButton accetta gli attributi nativi di Button, i gestori di eventi, le refs, gli slot delle icone,
le props loading e disabled. Per impostazione predefinita, i pulsanti usano type="button";
imposta esplicitamente type="submit" per l’invio del modulo.
Usa href per un link. Fornisci render per scegliere una root personalizzata, incluso un
link del router gestito dall’applicazione. Imposta nativeButton={false} e role="link" per
un renderer di navigazione. I pulsanti nativi personalizzati mantengono nativeButton impostato su true.
ButtonGroup può impostare dimensione, superficie
e colore condivisi. L’aspetto esplicito dell’elemento figlio ha la precedenza sul gruppo, seguito dalle
impostazioni predefinite del componente. Le classi consumer, incluse le funzioni di stato, vengono trasmesse
alla radice.
Props
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
"accent" | "danger" | "inherit" | "neutral" | "success"
Semantic color of the button.
inherit uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.boolean
predefinito:"true"
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
ReactNode
Decorative content displayed after the label.
boolean
predefinito:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
string
Destination URL. Renders a native anchor when
render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.boolean
Shows a loading indicator and disables activation.
"center" | "end" | "start"
Where the loading indicator appears.
center hides the content while preserving its layout space; start and end keep children and the opposite icon visible and replace the corresponding icon with the spinner.boolean
predefinito:"true"
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in
href anchor defaults to false; an explicit value takes precedence.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use
nativeButton={false} and role="link" for a custom navigation anchor. Router integration belongs to the caller.AriaRole
Role of the root element. Use
link for custom navigation renderers.ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
"md" | "sm"
Button height:
sm (24px) or md (32px). The link variant uses its content height at either size.ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
"ghost" | "link" | "outline" | "soft" | "solid"
predefinito:"solid"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.