Skip to main content
LightIconButton composes IconButton with a ghost surface and a small size. Supply an accessible name and decorative icon content.

​
Usage

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 <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 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 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.
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 so each retains its own focus and activation.

​
Props

​
string
Accessible name describing the action. Required unless aria-labelledby supplies the name.
​
string
ID of the element supplying the accessible name. Can be used instead of aria-label.
​
ReactNode
required
Icon content. Decorative and hidden from assistive technology.
​
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that returns a class based on the component’s state.
​
"accent" | "danger" | "neutral" | "success"
Semantic color of the button.
​
boolean
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
​
"standard" | "subtle"
default:"standard"
Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.
​
boolean
default:"false"
Whether the button should be focusable when disabled.
​
string
Destination URL. Renders a native anchor when render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.
​
boolean
Shows a loading indicator and disables activation.
​
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.
​
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.
​
AriaRole
Role of the root element. Use link for custom navigation renderers.
​
"round" | "square"
Square or round icon control.
​
"md" | "sm" | "xs"
default:"sm"
Button size: xs (20px), sm (24px), or md (32px).
​
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that returns a style object based on the component’s state.
​
string
Text displayed when hovering or focusing the button.
​
number
Delay before showing the tooltip.
​
number
Distance in pixels between the button and the tooltip.
​
"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"
Preferred placement of the tooltip relative to the button.
​
"ghost" | "link" | "outline" | "soft" | "solid"
default:"ghost"
Visual treatment of the button surface. link uses compact text styling without a filled surface or border; render composition determines native semantics.