---
title: MainButton
description: Present prominent actions with shared design defaults.
---

import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';

import MainButtonReference from '/snippets/ui/generated/input/main-button.mdx';

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

<MainButtonReference />