> ## 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 = 240}) => <>
    <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" 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" 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--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 theme={null}
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

<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;neutral&#x22; | &#x22;accent&#x22; | &#x22;danger&#x22; | &#x22;success&#x22;">
  Semantic color of the button.
</ParamField>

<ParamField body="elevated" type="boolean">
  Adds a shadow to the button.
</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="hotkeys" type="string[]">
  Keyboard shortcut hints displayed on non-mobile screens.
</ParamField>

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

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>">
  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="&#x22;sm&#x22; | &#x22;md&#x22;" default="sm">
  Button height: `sm` (24px) or `md` (32px).
</ParamField>

<ParamField body="soon" type="boolean">
  Displays a coming-soon label and disables activation.
</ParamField>

<ParamField body="soonLabel" type="string">
  Text for the coming-soon label.
</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;solid&#x22; | &#x22;outline&#x22; | &#x22;ghost&#x22; | &#x22;soft&#x22;" default="ghost">
  Visual treatment of the button surface.
</ParamField>