upstream-twenty/packages/twenty-docs/snippets/ui/generated/navigation/tabs.mdx

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

### Tabs.Root

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

<ParamField body="Root.defaultValue" type="any" default="0">
  The default value. Use when the component is not controlled.
  When the value is `null`, no Tab will be active.
</ParamField>

<ParamField body="Root.onValueChange" type="((value: any, eventDetails: TabsRootChangeEventDetails) =&gt; void)">
  Callback invoked when new value is being set.

  The event `reason` is `'none'` for user-initiated changes, such as a click
  or keyboard navigation; `'initial'` for the first automatic selection or
  fallback in uncontrolled roots when `defaultValue` is omitted or
  `undefined`, including when the implicit initial value is disabled or
  missing; `'disabled'` for automatic fallback when the selected tab becomes
  disabled in uncontrolled roots; or `'missing'` for automatic fallback when
  the selected tab is removed, or when an explicit `defaultValue` never
  matches a mounted tab in uncontrolled roots.

  For automatic changes, the selected value can be `null` when no enabled Tab
  is available as a fallback.

  Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
  `'initial'`, `'disabled'`, or `'missing'` has no effect.
</ParamField>

<ParamField body="Root.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="horizontal">
  The component orientation (layout flow direction).
</ParamField>

<ParamField body="Root.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsRootState&gt;">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

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

<ParamField body="Root.value" type="any">
  The value of the currently active `Tab`. Use when the component is controlled.
  When the value is `null`, no Tab will be active.
</ParamField>

### Tabs.List

<ParamField body="List.activateOnFocus" type="boolean" default="false">
  Whether to automatically change the active tab on arrow key focus.
  Otherwise, tabs will be activated using &lt;kbd>Enter&lt;/kbd> or &lt;kbd>Space&lt;/kbd> key press.
</ParamField>

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

<ParamField body="List.loopFocus" type="boolean" default="true">
  Whether to loop keyboard focus back to the first item
  when the end of the list is reached while using the arrow keys.
</ParamField>

<ParamField body="List.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsListState&gt;">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

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

### Tabs.Tab

<ParamField body="Tab.badge" type="ReactNode">
  Content rendered after the label, such as a count.
</ParamField>

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

<ParamField body="Tab.disabled" type="boolean">
  Whether the Tab is disabled.

  If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.
  Instead, the next enabled Tab will be selected.
  However, it does not work like this during server-side rendering, as it is not known
  during pre-rendering which Tabs are disabled.
  To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
</ParamField>

<ParamField body="Tab.nativeButton" type="boolean" default="true">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `false` if the rendered element is not a button (for example, `<div>`).
</ParamField>

<ParamField body="Tab.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsTabState&gt;">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="Tab.size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
  Visual size of the tab.
</ParamField>

<ParamField body="Tab.startIcon" type="ReactNode">
  Icon rendered before the label.
</ParamField>

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

<ParamField body="Tab.value" type="any" required>
  The value of the Tab.
</ParamField>

### Tabs.Panel

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

<ParamField body="Panel.keepMounted" type="boolean" default="false">
  Whether to keep the HTML element in the DOM while the panel is hidden.
</ParamField>

<ParamField body="Panel.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, TabsPanelState&gt;">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

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

<ParamField body="Panel.value" type="any" required>
  The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
</ParamField>