Icon Button

Compact icon-only action button with built-in tooltip and shared button semantics.

Overview

IconButton is the standard icon-only action button used across the platform.

It is built on the shared Button primitive and commonly appears in:

<IconButton
  icon="Filter"
  label="Filters"
  onClick={handleOpenFilters}
/>

When label is provided, IconButton shows that label in a tooltip by default.

That means label is doing two jobs:

<IconButton icon="TrashCan02" label="Delete" />

Set tooltip={false} when the accessible label should still exist but the tooltip should not render.

Use children instead of icon when the content is not a named icon.

<IconButton label="Close">
  <CrossSmall className="h-4 w-4" />
</IconButton>

Prop	Type	Default	Description
`icon`	`IconName`	—	Named icon content. Mutually exclusive with `children`.
`children`	`ReactNode`	—	Custom content. Mutually exclusive with `icon`.
`label`	`string`	—	Accessible label and default tooltip content.
`tooltip`	`boolean`	`true`	Shows tooltip when `label` exists.
`size`	`ButtonSize`	—	Button size.
`variant`	`ButtonVariant`	`'ghost'`	Shared button variant.
`isLoading`	`boolean`	—	Disables interaction while loading.
`disabled`	`boolean`	—	Disables interaction.
`isActive`	`boolean`	—	Adds active-state styling.
`stopPropagation`	`boolean`	`true`	Stops click bubbling by default.
`iconClassName`	`string`	—	Additional icon classes.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.

Always provide a meaningful label for icon-only controls.
stopPropagation defaults to true, which matters inside clickable rows, cards, and table items.
For ordinary text buttons with icons, use Button instead of IconButton.

Pattern	Path	Notes
DataTable toolbar action	`fsai/packages/shared-ui/src/components/DataTable/toolbar/Popover.tsx`	Canonical icon-button popover trigger.
Rich text toolbar action	`fsai/apps/brand-dashboard/src/components/RichTextEditor/RichTextEditor.tsx`	Dense editor actions and popover anchors.
Chat and dashboard actions	`fsai/apps/brand-dashboard/src/pages/Home/ChatOverview/ChatOverview.components.tsx`	Compact inline action usage in dense UI.