> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MainButton

> Presenta azioni prominenti con impostazioni predefinite di progettazione condivise.

## Panoramica

Usa il componente condiviso `MainButton` per un'azione prominente. Compone
[Button](https://docs.twenty.com/it/ui/primitives/input/button.md) con una superficie piena, elevazione, testo in semigrassetto
e spaziatura orizzontale di 12 px. Il colore predefinito è neutro e la dimensione è `md`.

**Light**

[Esempio di MainButton (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di MainButton (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-mainbutton--display)

## Utilizzo

```tsx theme={null}
import { MainButton } from 'twenty-ui/components/input';

export const SaveAction = () => <MainButton>Save changes</MainButton>;
```

## Opzioni visive

Confronta gli aspetti pieni e con contorno nelle dimensioni predefinita e piccola, oltre agli stati disabilitato e di caricamento.

**Light**

[Varianti e stati del pulsante principale (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Varianti e stati del pulsante principale (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-mainbutton--catalog)

## 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](https://docs.twenty.com/it/ui/primitives/input/button.md#state-ownership) per gestire un'azione asincrona.

## Forme e larghezza

```tsx theme={null}
import { MainButton } from 'twenty-ui/components/input';

export const SaveProfile = () => (
  <MainButton type="submit" fullWidth>
    Save profile
  </MainButton>
);
```

La larghezza segue il contenuto, a meno che non imposti `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](https://docs.twenty.com/it/ui/primitives/input/button-group.md) 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

**className** `string | ((state: ButtonState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**color** `"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.

**elevated** `boolean` (default: true)

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**endIcon** `ReactNode`

Decorative content displayed after the label.

**focusableWhenDisabled** `boolean` (default: false)

Whether the button should be focusable when disabled.

**fullWidth** `boolean`

Expands the button to fill its container width.

**href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**loading** `boolean`

Shows a loading indicator and disables activation.

**loadingPosition** `"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.

**nativeButton** `boolean` (default: 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.

**render** `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.

**role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**shortcut** `ShortcutDefinition`

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

**shortcutJoinLabel** `string`

Localized text between sequence steps. Defaults to then.

**size** `"md" | "sm"`

Button height: `sm` (24px) or `md` (32px). The `link` variant uses its content height at either size.

**startIcon** `ReactNode`

Decorative content displayed before the label.

**style** `CSSProperties | ((state: ButtonState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"` (default: solid)

Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.