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

# LightIconButton

> Present lightweight icon 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>
  </>;

`LightIconButton` composes [IconButton](/ui/components/input/icon-button) with a ghost surface and a small size. Supply an accessible name and decorative icon content.

<StoryEmbed storyId="ui-input-button-lighticonbutton--documentation" title="Light icon button" height={240} />

## Usage

```tsx theme={null}
import { LightIconButton } from 'twenty-ui/components';
import { IconPlus } from 'twenty-ui/icon';

export const AddAction = () => (
  <LightIconButton aria-label="Add record" emphasis="subtle">
    <IconPlus />
  </LightIconButton>
);
```

Standard emphasis uses secondary neutral text; subtle emphasis uses tertiary text. Explicit semantic colors and group colors take precedence. Small controls are 24px with a 14px icon; medium controls are 32px with a 16px icon. Compact controls use `size="xs"` and are 20px.

## State and interaction

Button owns keyboard activation, disabled and loading behavior, refs, native attributes, and render composition. The native default is `type="button"`. Use `aria-pressed` for toggles and `aria-expanded` for disclosures. The application owns these states and can set `color="accent"` to highlight a selected action. Keyboard focus uses the shared focus ring.

Tooltip text is optional and does not replace `aria-label`. Set `href` for a link and supply `render` when the application owns routing.

## Updating existing controls

Import `LightIconButton` from `twenty-ui/components`. Replace `Icon={IconPlus}` with `<IconPlus />` children, `small`/`medium` with `sm`/`md`, `accent="tertiary"` with `emphasis="subtle"`, and `testId` with `data-testid`. Replace synthetic `active` and `focus` flags with semantic state and actual keyboard focus.

Replace `LightIconButtonGroup` with [ButtonGroup](/ui/primitives/input/button-group) using `attached={false}` and explicit children. Set `disabled` on unavailable actions, including actions without a click handler. Wrappers and tooltip triggers can remain around each child.

## Menu item icon buttons

`MenuItem`, `MenuItemDraggable`, and `MenuItemAvatar` accept JSX through `iconButtons`. Pass one `LightIconButton` directly, or use `ButtonGroup` for multiple buttons. The menu controls their placement and hover visibility; each button owns its accessible name, click handler, and disabled state. Wrap dropdown triggers directly around the button.

```tsx theme={null}
import { LightIconButton } from 'twenty-ui/components';
import { IconEyeOff, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';
import { MenuItem } from 'twenty-ui/primitives/navigation';

export const RecordMenuItem = () => (
  <MenuItem
    text="Record"
    iconButtons={
      <ButtonGroup attached={false}>
        <LightIconButton aria-label="Hide record">
          <IconEyeOff />
        </LightIconButton>
        <LightIconButton aria-label="Delete record" disabled>
          <IconTrash />
        </LightIconButton>
      </ButtonGroup>
    }
  />
);
```

Replace descriptor arrays with these elements and remove `MenuItemIconButton` types. A button without an `onClick` handler can remain enabled when a surrounding dropdown owns its interaction. Set `disabled` explicitly for unavailable buttons.

## Props

<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) => 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 to the button.
</ParamField>

<ParamField body="emphasis" type="&#x22;standard&#x22; | &#x22;subtle&#x22;" default="standard">
  Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
</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<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="shape" type="&#x22;round&#x22; | &#x22;square&#x22;">
  Square or round icon control.
</ParamField>

<ParamField body="size" type="&#x22;md&#x22; | &#x22;sm&#x22; | &#x22;xs&#x22;" default="sm">
  Button size: `xs` (20px), `sm` (24px), or `md` (32px).
</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="tooltip" type="string">
  Text displayed when hovering or focusing the button.
</ParamField>

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

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

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

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