> ## 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.
# IconButton
> Trigger actions with accessible square icon buttons.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`IconButton` composes [Button](/ui/primitives/input/button) with a square surface. Pass the icon as children and provide an `aria-label` describing the action. Icon content is decorative and hidden from assistive technology.
## Usage
```tsx theme={null}
import { IconButton } from 'twenty-ui/components';
import { IconPlus } from 'twenty-ui/icon';
export const CreateRecordButton = () => (
);
```
Sizes are `sm` (24px) and `md` (32px). The defaults are `md`, `outline`, and `neutral`. Variants and colors match Button.
## Tooltip
Add `tooltip` to show text on hover and keyboard focus. Keep `aria-label` as the accessible name of the action. Disabled and loading buttons retain hover tooltips.
```tsx theme={null}
import { IconButton } from 'twenty-ui/components';
import { IconSearch } from 'twenty-ui/icon';
export const SearchRecordsButton = () => (
);
```
The tooltip defaults to the bottom, with a 1000ms delay and a 5px offset. Use `tooltipPlace`, `tooltipDelay`, and `tooltipOffset` to adjust it. Omitting `tooltip` renders the button directly.
## State ownership
Your application supplies `loading` and `disabled`. Both prevent activation. Loading preserves the square dimensions and accessible label. The button does not track a selected value or set loading automatically after a click. Native keyboard focus follows the browser; use `aria-pressed` when your application owns a toggle state.
## Grouped actions
```tsx theme={null}
import { ButtonGroup } from 'twenty-ui/primitives/input';
import { IconButton } from 'twenty-ui/components';
import { IconPlus, IconSearch } from 'twenty-ui/icon';
export const RecordActions = () => (
);
```
[ButtonGroup](/ui/primitives/input/button-group) supplies size, variant, color, and adjoining corners. Individual buttons do not need a position prop.
## Links and forms
Use `href` to render an anchor. The caller can provide a custom `render` element, including its own router link. Supply `href` to select link semantics; the renderer must preserve an anchor. Without `href`, preserve a native button. Neither `nativeButton` nor `role` is part of the public button interface. Disabled links cannot activate. Routing stays in the application.
Native attributes, event handlers, refs, and render composition pass through to Button. The default is `type="button"`; set `type="submit"` explicitly for form submission.
## Props
Required accessible name describing the action.
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 to the button.
Whether the button should be focusable when disabled.
Shows a loading indicator and disables activation while preserving the button width.
Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.
Square button size: `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.