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

> Present prominent actions with shared design defaults.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

Use the shared `MainButton` component for a prominent action. It composes
[Button](/ui/primitives/input/button) with a solid surface, elevation, semibold
text, and 12px horizontal padding. Its default color is neutral and size is `md`.

<StoryEmbed storyId="ui-components-mainbutton--default" title="MainButton example" height={240} />

## State ownership

`MainButton` uses Button's state model and adds no state of its own. Your application supplies `loading`, `disabled`, and `soon`; there are no controlled and uncontrolled selection modes. See [Button's state ownership example](/ui/primitives/input/button#state-ownership) for managing an asynchronous action.

## Usage

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

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

Width follows the content unless you set `fullWidth` or provide application
layout styling. Override `variant`, `color`, `size`, and `elevated` as needed;
for example, use `variant="outline"` and `elevated={false}` for an outlined action.
Keep page layout in your application's styling.

## Interaction

`MainButton` accepts Button's native attributes, event handlers, refs, icon slots,
`loading`, `disabled`, and `soon` props. Buttons default to `type="button"`;
set `type="submit"` explicitly for form submission.

Use `href` for a link. Supply `render` to choose a custom root, including an
application-owned router link. The root must preserve a native button, or an
anchor when `href` is set. Button derives the interaction behavior from `href`.

[ButtonGroup](/ui/primitives/input/button-group) can set a shared size, surface,
and color. Consumer classes, including state functions, pass through to the root.

## Props

<ParamField body="className" type="string | ((state: ButtonState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="color" type="&#x22;neutral&#x22; | &#x22;accent&#x22; | &#x22;danger&#x22; | &#x22;success&#x22;">
  Semantic color of the button.
</ParamField>

<ParamField body="elevated" type="boolean" default="true">
  Adds a shadow to the button.
</ParamField>

<ParamField body="endIcon" type="ReactNode">
  Decorative content displayed after the label.
</ParamField>

<ParamField body="focusableWhenDisabled" type="boolean" default="false">
  Whether the button should be focusable when disabled.
</ParamField>

<ParamField body="fullWidth" type="boolean">
  Expands the button to fill its container width.
</ParamField>

<ParamField body="hotkeys" type="string[]">
  Keyboard shortcut hints displayed on non-mobile screens.
</ParamField>

<ParamField body="loading" type="boolean">
  Shows a loading indicator and disables activation while preserving the button width.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>">
  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;">
  Button height: `sm` (24px) or `md` (32px).
</ParamField>

<ParamField body="soon" type="boolean">
  Displays a coming-soon label and disables activation.
</ParamField>

<ParamField body="soonLabel" type="string">
  Text for the coming-soon label.
</ParamField>

<ParamField body="startIcon" type="ReactNode">
  Decorative content displayed before the label.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: ButtonState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="variant" type="&#x22;solid&#x22; | &#x22;outline&#x22; | &#x22;ghost&#x22; | &#x22;soft&#x22;" default="solid">
  Visual treatment of the button surface.
</ParamField>