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

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

@@ -0,0 +1,94 @@
+---
+title: IconButton
+description: Trigger actions with accessible square icon buttons.
+---
+
+import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';
+
+import IconButtonReference from '/snippets/ui/generated/input/icon-button.mdx';
+
+`IconButton` composes [Button](/ui/primitives/input/button) with a square surface. Pass the icon as children and provide an `aria-label` describing the action. Icon content is decorative and hidden from assistive technology.
+
+## Usage
+
+```tsx
+import { IconButton } from 'twenty-ui/components';
+import { IconPlus } from 'twenty-ui/icon';
+
+export const CreateRecordButton = () => (
+  <IconButton
+    aria-label="Create record"
+    variant="solid"
+    color="accent"
+    size="sm"
+  >
+    <IconPlus />
+  </IconButton>
+);
+```
+
+Sizes are `sm` (24px) and `md` (32px). The defaults are `md`, `outline`, and `neutral`. Variants and colors match Button.
+
+<StoryEmbed
+  title="Icon button example"
+  storyId="ui-components-iconbutton--catalog"
+  height={620}
+/>
+
+## Tooltip
+
+Add `tooltip` to show text on hover and keyboard focus. Keep `aria-label` as the accessible name of the action. Disabled and loading buttons retain hover tooltips.
+
+```tsx
+import { IconButton } from 'twenty-ui/components';
+import { IconSearch } from 'twenty-ui/icon';
+
+export const SearchRecordsButton = () => (
+  <IconButton aria-label="Search" tooltip="Search records" variant="ghost">
+    <IconSearch />
+  </IconButton>
+);
+```
+
+<StoryEmbed
+  title="Icon button with tooltip"
+  storyId="ui-components-iconbutton--tooltip"
+  height={180}
+/>
+
+The tooltip defaults to the bottom, with a 1000ms delay and a 5px offset. Use `tooltipPlace`, `tooltipDelay`, and `tooltipOffset` to adjust it. Omitting `tooltip` renders the button directly.
+
+## State ownership
+
+Your application supplies `loading` and `disabled`. Both prevent activation. Loading preserves the square dimensions and accessible label. The button does not track a selected value or set loading automatically after a click. Native keyboard focus follows the browser; use `aria-pressed` when your application owns a toggle state.
+
+## Grouped actions
+
+```tsx
+import { ButtonGroup } from 'twenty-ui/primitives/input';
+import { IconButton } from 'twenty-ui/components';
+import { IconPlus, IconSearch } from 'twenty-ui/icon';
+
+export const RecordActions = () => (
+  <ButtonGroup aria-label="Record actions" size="sm" variant="outline">
+    <IconButton aria-label="Search records">
+      <IconSearch />
+    </IconButton>
+    <IconButton aria-label="Create record">
+      <IconPlus />
+    </IconButton>
+  </ButtonGroup>
+);
+```
+
+[ButtonGroup](/ui/primitives/input/button-group) supplies size, variant, color, and adjoining corners. Individual buttons do not need a position prop.
+
+## Links and forms
+
+Use `href` to render an anchor. The caller can provide a custom `render` element, including its own router link. Supply `href` to select link semantics; the renderer must preserve an anchor. Without `href`, preserve a native button. Neither `nativeButton` nor `role` is part of the public button interface. Disabled links cannot activate. Routing stays in the application.
+
+Native attributes, event handlers, refs, and render composition pass through to Button. The default is `type="button"`; set `type="submit"` explicitly for form submission.
+
+## Props
+
+<IconButtonReference />

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

@@ -0,0 +1,56 @@
+---
+title: LightButton
+description: Present lightweight actions with standard or subtle emphasis.
+---
+
+import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';
+
+import LightButtonReference from '/snippets/ui/generated/input/light-button.mdx';
+
+Use the shared `LightButton` component for a lightweight action. It composes
+[Button](/ui/primitives/input/button) with a ghost surface, small size, regular
+font weight, and no elevation.
+
+<StoryEmbed
+  storyId="ui-components-lightbutton--default"
+  title="LightButton example"
+  height={240}
+/>
+
+## State ownership
+
+`LightButton` uses Button's state model and adds no state of its own. Your application supplies `loading`, `disabled`, and `soon`; `emphasis` only changes appearance. See [Button's state ownership example](/ui/primitives/input/button#state-ownership) for managing an asynchronous action. There are no controlled and uncontrolled selection modes.
+
+## Usage
+
+```tsx
+import { LightButton } from 'twenty-ui/components';
+import { IconPlus } from 'twenty-ui/icon';
+
+export const FilterActions = () => (
+  <LightButton emphasis="subtle" startIcon={<IconPlus />}>
+    Add filter
+  </LightButton>
+);
+```
+
+The default `emphasis="standard"` uses secondary neutral text.
+`emphasis="subtle"` uses tertiary neutral text on ghost, outline, and soft
+surfaces. Semantic colors and solid surfaces retain their contrast treatment.
+
+Override `variant`, `color`, `size`, or `elevated` when needed.
+[ButtonGroup](/ui/primitives/input/button-group) can set a shared size, surface,
+and color; subtle emphasis does not replace the group's semantic color.
+
+## Interaction
+
+`LightButton` accepts Button's native attributes, refs, event handlers, icon
+slots, loading and disabled states, and render composition. Its native default
+is `type="button"`. Set `type="submit"` for submission or 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`.
+
+## Props
+
+<LightButtonReference />

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

packages/twenty-docs/ui/components/overview.mdx

@@ -0,0 +1,18 @@
+---
+title: Components
+sidebarTitle: Overview
+description: Shared design presets and reusable app building blocks composed from Twenty UI primitives.
+---
+
+Components combine [primitives](/ui/primitives/overview) into recurring design presets and reusable app building blocks. Like primitives, they receive data and callbacks from your application.
+
+Import shared components from `twenty-ui/components`. See [Getting started](/ui/getting-started) for installation and theme setup.
+
+## Browse components
+
+| Component                                        | Purpose                                                               |
+| ------------------------------------------------ | --------------------------------------------------------------------- |
+| [MainButton](/ui/components/input/main-button)   | Prominent actions with a solid surface, elevation, and semibold text. |
+| [LightButton](/ui/components/input/light-button) | Lightweight actions with standard or subtle emphasis.                 |
+| [IconButton](/ui/components/input/icon-button)   | Square icon actions built on Button.                                  |
+| [Section](/ui/components/section)                | Related content with a heading, description, and optional action.     |

packages/twenty-docs/ui/components/section.mdx

@@ -0,0 +1,52 @@
+---
+title: Section
+description: Group content with a heading, supporting description, and optional action.
+---
+
+import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';
+import SectionReference from '/snippets/ui/generated/components/section.mdx';
+
+`Section.Root` groups related content. `Section.Header` combines [Heading](/ui/primitives/typography/heading) with a description and an optional `adornment`. Descriptions are ordinary text associated with the heading, so they do not add levels to the document outline.
+
+<StoryEmbed
+  storyId="ui-components-section--documentation"
+  title="Section example"
+  height={200}
+/>
+
+## Add a description and action
+
+```tsx
+import { Section } from 'twenty-ui/components';
+import { Button } from 'twenty-ui/primitives/input';
+import { Text } from 'twenty-ui/primitives/typography';
+
+export const WorkspaceSection = () => (
+  <Section.Root>
+    <Section.Header
+      title="Workspace settings"
+      description="Manage your workspace name and preferences."
+      adornment={<Button>Edit workspace</Button>}
+    />
+    <Text>Workspace preferences appear here.</Text>
+  </Section.Root>
+);
+```
+
+`Section.Root` defaults to a full-width `div` with left alignment and the primary text color. Use `align`, `color`, and `fullWidth` to adjust the content wrapper.
+
+`Section.Header` can also be used by itself. Its `level`, `size`, and `color` configure the heading and default to `2`, `md`, and `primary`. The header has one spacing-4 margin after it. Use native `style` or `className` to adjust that spacing.
+
+## Description overflow
+
+String descriptions preserve line breaks, turn URLs into links, and show up to five lines. Set `descriptionLineClamp` to a positive integer to choose another limit. Hovering or focusing an overflowing description reveals its full text; Escape dismisses the tooltip.
+
+Pass a React node for richer supporting content. Rich descriptions render as supplied, without automatic truncation or tooltips.
+
+## Composition
+
+Both parts forward native attributes, refs, class names, styles, and `render` to their outer element. For example, `Section.Root render={<section aria-label="Workspace settings" />}` provides a named section, and `Section.Header render={<header />}` uses a header container.
+
+## Props
+
+<SectionReference />