snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/ui/components/input/main-button.mdx

@@ -0,0 +1,56 @@
+---
+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 />