{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | 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
 */}

<ParamField body="aria-label" type="string" required>
  Required accessible name describing the action.
</ParamField>

<ParamField body="children" type="ReactNode" required>
  Icon content. Decorative and hidden from assistive technology.
</ParamField>

<ParamField body="className" type="string | ((state: ButtonState) =&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="color" type="&quot;neutral&quot; | &quot;accent&quot; | &quot;danger&quot; | &quot;success&quot;">
  Semantic color of the button.
</ParamField>

<ParamField body="elevated" type="boolean">
  Adds a shadow to the button.
</ParamField>

<ParamField body="focusableWhenDisabled" type="boolean" default="false">
  Whether the button should be focusable when disabled.
</ParamField>

<ParamField body="loading" type="boolean">
  Shows a loading indicator and disables activation while preserving the button width.
</ParamField>

<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ButtonState&gt;">
  Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
</ParamField>

<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;">
  Square button size: `sm` (24px) or `md` (32px).
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: ButtonState) =&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="tooltip" type="string">
  Text displayed when hovering or focusing the button.
</ParamField>

<ParamField body="tooltipDelay" type="number" default="1000">
  Delay before showing the tooltip.
</ParamField>

<ParamField body="tooltipOffset" type="number" default="5">
  Distance in pixels between the button and the tooltip.
</ParamField>

<ParamField body="tooltipPlace" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;" default="bottom">
  Preferred placement of the tooltip relative to the button.
</ParamField>

<ParamField body="variant" type="&quot;solid&quot; | &quot;outline&quot; | &quot;ghost&quot; | &quot;soft&quot;">
  Visual treatment of the button surface.
</ParamField>