> ## 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

> Prezentați acțiuni importante cu valori implicite de design partajate.

## Prezentare generală

Utilizați componenta partajată `MainButton` pentru o acțiune importantă. Aceasta compune
[Button](https://docs.twenty.com/ro/ui/primitives/input/button.md) cu o suprafață solidă, elevație, text semibold
și padding orizontal de 12px. Culoarea sa implicită este neutră, iar dimensiunea este `md`.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

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

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

## Opțiuni vizuale

Comparați aspectele plin și conturat în dimensiunile implicite și mici, precum și stările dezactivată și de încărcare.

**Light**

[Variantele și stările butonului principal (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variantele și stările butonului principal (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)

## Gestionarea stării

`MainButton` utilizează modelul de stare al Button și nu adaugă nicio stare proprie. Aplicația dvs. furnizează `loading` și `disabled`; nu există moduri de selectare controlate și necontrolate. Consultați [exemplul de gestionare a stării pentru Button](https://docs.twenty.com/ro/ui/primitives/input/button.md#state-ownership) pentru gestionarea unei acțiuni asincrone.

## Forme și lățime

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

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

Lățimea urmează conținutul, cu excepția cazului în care setați `fullWidth` sau furnizați stiluri
pentru aspectul aplicației. Suprascrieți `variant`, `color`, `size` și `elevated` după necesități;
de exemplu, utilizați `variant="outline"` și `elevated={false}` pentru o acțiune conturată.

Cu `color="inherit"`, alegeți în mod explicit o variantă non-solid sau moșteniți una de la ButtonGroup. Valoarea implicită solidă autonomă cu culoare moștenită generează o eroare la rulare.

Păstrați aspectul paginii în stilurile aplicației dvs.

## Interacțiune

`MainButton` acceptă atributele native, gestionarii de evenimente, referințele, sloturile pentru pictograme ale Button,
precum și proprietățile `loading` și `disabled`. Butoanele au implicit `type="button"`;
setați explicit `type="submit"` pentru trimiterea formularului.

Utilizați `href` pentru un link. Furnizați `render` pentru a alege o rădăcină personalizată, inclusiv un
link de rutare deținut de aplicație. Setați `nativeButton={false}` și `role="link"` pentru
un renderer de navigare. Butoanele native personalizate păstrează `nativeButton` pe true.

[ButtonGroup](https://docs.twenty.com/ro/ui/primitives/input/button-group.md) poate seta o dimensiune, o suprafață
și o culoare partajate. Aspectul explicit al elementului copil are prioritate față de grup, urmat de
valorile implicite ale componentei. Clasele consumatorului, inclusiv funcțiile de stare, sunt transmise mai departe
către elementul rădăcină.

## Proprietăți

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