> ## 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.

# LightButton

> Present lightweight actions with standard or subtle emphasis.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

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--display" title="LightButton example" height={100} />

## Usage

```tsx theme={null}
import { LightButton } from 'twenty-ui/components/input';

export const FilterAction = () => <LightButton>Add filter</LightButton>;
```

## Visual options

Compare standard and subtle emphasis across common action states.

<StoryEmbed storyId="ui-components-lightbutton--catalog" title="Light button emphasis and states" height={230} />

## State ownership

`LightButton` uses Button's state model and adds no state of its own. Your application supplies `loading` and `disabled`; `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.

## Emphasis and icons

```tsx theme={null}
import { LightButton } from 'twenty-ui/components/input';
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. Explicit child appearance takes precedence over the group, followed by
the component defaults. Subtle emphasis does not replace the 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. Set `nativeButton={false}` and `role="link"` for a navigation renderer.
Custom native buttons keep `nativeButton` true.

## Props

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

<ParamField body="elevated" type="boolean">
  Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
</ParamField>

<ParamField body="emphasis" type="&#x22;standard&#x22; | &#x22;subtle&#x22;" default="standard">
  Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment.
</ParamField>

<ParamField body="endIcon" type="ReactNode">
  Decorative content displayed after the label.
</ParamField>

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

<ParamField body="fullWidth" type="boolean">
  Expands the button to fill its container width.
</ParamField>

<ParamField body="href" type="string">
  Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.
</ParamField>

<ParamField body="loading" type="boolean">
  Shows a loading indicator and disables activation.
</ParamField>

<ParamField body="loadingPosition" type="&#x22;center&#x22; | &#x22;end&#x22; | &#x22;start&#x22;">
  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.
</ParamField>

<ParamField body="nativeButton" type="boolean" default="true">
  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.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>">
  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.
</ParamField>

<ParamField body="role" type="AriaRole">
  Role of the root element. Use `link` for custom navigation renderers.
</ParamField>

<ParamField body="shortcut" type="ShortcutDefinition">
  Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
</ParamField>

<ParamField body="shortcutJoinLabel" type="string">
  Localized text between sequence steps. Defaults to then.
</ParamField>

<ParamField body="size" type="&#x22;md&#x22; | &#x22;sm&#x22;" default="sm">
  Button height: `sm` (24px) or `md` (32px). The `link` variant uses its content height at either size.
</ParamField>

<ParamField body="startIcon" type="ReactNode">
  Decorative content displayed before the label.
</ParamField>

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

<ParamField body="variant" type="&#x22;ghost&#x22; | &#x22;link&#x22; | &#x22;outline&#x22; | &#x22;soft&#x22; | &#x22;solid&#x22;" default="ghost">
  Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.