> ## 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 acciones destacadas con valores predeterminados de diseño compartidos.

## Resumen

Usa el componente compartido `MainButton` para una acción destacada. Compone
[Button](https://docs.twenty.com/es/ui/primitives/input/button.md) con una superficie sólida, elevación, texto en seminegrita
y relleno horizontal de 12px. Su color predeterminado es neutro y su tamaño es `md`.

**Light**

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

**Dark**

[Ejemplo de 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)

## "Uso"

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

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

## Opciones visuales

Compare las apariencias sólidas y con contorno en los tamaños predeterminado y pequeño, además de los estados deshabilitado y de carga.

**Light**

[Variantes y estados del botón principal (light)](https://storybook.twenty.com/iframe.html?id=ui-components-mainbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variantes y estados del botón 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)

## Propiedad del estado

`MainButton` usa el modelo de estado de Button y no añade ningún estado propio. Tu aplicación proporciona `loading` y `disabled`; no hay modos de selección controlados ni no controlados. Consulta el [ejemplo de propiedad del estado de Button](https://docs.twenty.com/es/ui/primitives/input/button.md#state-ownership) para gestionar una acción asíncrona.

## Formas y ancho

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

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

El ancho se ajusta al contenido, a menos que establezcas `fullWidth` o proporciones estilos de diseño
de la aplicación. Sobrescribe `variant`, `color`, `size` y `elevated` según sea necesario;
por ejemplo, usa `variant="outline"` y `elevated={false}` para una acción con contorno.

Con `color="inherit"`, elige explícitamente una variante no sólida o hereda una de ButtonGroup. El valor predeterminado sólido independiente con color heredado genera un error de tiempo de ejecución.

Mantén el diseño de la página en los estilos de tu aplicación.

## Interacción

`MainButton` acepta los atributos nativos, controladores de eventos, refs, ranuras de iconos,
las props `loading` y `disabled` de Button. Los botones usan `type="button"` de forma predeterminada;
establece explícitamente `type="submit"` para el envío de formularios.

Usa `href` para un enlace. Proporciona `render` para elegir una raíz personalizada, incluido un
enlace de enrutador propiedad de la aplicación. Establezca `nativeButton={false}` y `role="link"` para
un renderizador de navegación. Los botones nativos personalizados mantienen `nativeButton` en true.

[ButtonGroup](https://docs.twenty.com/es/ui/primitives/input/button-group.md) puede establecer un tamaño, una superficie
y un color compartidos. La apariencia explícita del elemento secundario tiene prioridad sobre la del grupo, seguida de
los valores predeterminados del componente. Las clases del consumidor, incluidas las funciones de estado, se transfieren
a la raíz.

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