> ## 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 = 120}) => <>
Open in Storybook
;
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`.
## Usage
```tsx theme={null}
import { MainButton } from 'twenty-ui/components/input';
export const SaveAction = () => Save changes;
```
## Visual options
Compare solid and outline appearances across default and small sizes, plus disabled and loading states.
## State ownership
`MainButton` uses Button's state model and adds no state of its own. Your application supplies `loading` and `disabled`; 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.
## Forms and width
```tsx theme={null}
import { MainButton } from 'twenty-ui/components/input';
export const SaveProfile = () => (
Save profile
);
```
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` and `disabled` 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. Set `nativeButton={false}` and `role="link"` for
a navigation renderer. Custom native buttons keep `nativeButton` true.
[ButtonGroup](/ui/primitives/input/button-group) can set a shared size, surface,
and color. Explicit child appearance takes precedence over the group, followed by
the component defaults. Consumer classes, including state functions, pass through
to the root.
## Props
CSS class applied to the element, or a function that
returns a class based on the component's state.
Semantic color of the button.
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
Decorative content displayed after the label.
Whether the button should be focusable when disabled.
Expands the button to fill its container width.
Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.
Shows a loading indicator and disables activation.
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.
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.
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 of the root element. Use `link` for custom navigation renderers.
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
Localized text between sequence steps. Defaults to then.
Button height: `sm` (24px) or `md` (32px). The `link` variant uses its content height at either size.
Decorative content displayed before the label.
Style applied to the element, or a function that
returns a style object based on the component's state.
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.