> ## 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 = 120}) => <>
Open in Storybook
;
`LightIconButton` composes [IconButton](/ui/components/input/icon-button) with a ghost surface and a small size. Supply an accessible name and decorative icon content.
## Usage
```tsx theme={null}
import { LightIconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';
export const SearchAction = () => (
);
```
Standard emphasis uses secondary neutral text; subtle emphasis uses tertiary text. Explicit child appearance takes precedence over ButtonGroup values, followed by the component defaults. Semantic colors retain their own contrast treatment. Small controls are 24px with a 14px icon; medium controls are 32px with a 16px icon. Compact controls use `size="xs"` and are 20px.
## Visual options
Compare emphasis at small and medium sizes, including selected, loading, and disabled states.
## 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 an accessible name from `aria-label` or `aria-labelledby`. Set `href` for a link. For application-owned routing, supply `render`, `nativeButton={false}`, and `role="link"`.
## Updating existing controls
Import `LightIconButton` from `twenty-ui/components`. Replace `Icon={IconPlus}` with `` 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.
## Row actions
Use a passive [ListItem](/ui/primitives/navigation/list-item) with an `actions` slot for independent controls. Pass one `LightIconButton` directly, or use `ButtonGroup` for multiple buttons. 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/input';
import { IconEyeOff, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';
import { ListItem } from 'twenty-ui/primitives/navigation';
export const RecordActions = () => (
}
>
Record
);
```
A button without an `onClick` handler can remain enabled when a surrounding dropdown owns its interaction. Set `disabled` explicitly for unavailable buttons. Keep independent controls beside an actionable [ListItemButton](/ui/components/navigation/list-item-button) so each retains its own focus and activation.
## Props
Accessible name describing the action. Required unless `aria-labelledby` supplies the name.
ID of the element supplying the accessible name. Can be used instead of `aria-label`.
Icon content. Decorative and hidden from assistive technology.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Semantic color of the button.
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
Whether the button should be focusable when disabled.
Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.
Shows a loading indicator and disables activation.
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.
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.
Role of the root element. Use `link` for custom navigation renderers.
Square or round icon control.
Button size: `xs` (20px), `sm` (24px), or `md` (32px).
Style applied to the element, or a function that
returns a style object based on the component's state.
Text displayed when hovering or focusing the button.
Delay before showing the tooltip.
Distance in pixels between the button and the tooltip.
Preferred placement of the tooltip relative to the button.
Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.