IconButton

IconButton

<IconButton aria-label="Close"><CloseIcon /></IconButton>
<IconButton aria-label="Delete" tone="danger" variant="soft"><TrashIcon /></IconButton>

Install: @helixui/core

import { IconButton } from '@helixui/core'

status: stable · since: 0.1.0

Tags: clickable, icon-only, compact, action

Live playground

Open the full editor or source on GitHub.

Anatomy

[ ⊙ ]   ← square button, icon only

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — ~28/36/44px square (sm/md/lg)
• stackable — true
• fullBleed — false

Visual

A square button (radius.md) sized for an icon child. Same variants and tones as Button. Requires aria-label.

Props

Name	Type	Default	Description
aria-label	string	—	Required. Names the action — screen readers have no visible text to read.
variant	'solid' | 'soft' | 'ghost' | 'outline'	ghost	Visual style.
tone	'brand' | 'neutral' | 'danger'	neutral	Color intent.
size	'sm' | 'md' | 'lg'	md	Square size — 32 / 40 / 48 px.

Slots

• children — the icon node

Tokens used

color.bg.action.brand.default, color.bg.action.brand.hover, color.bg.action.brand.subtle, color.bg.action.neutral.default, color.bg.action.neutral.hover, color.bg.action.danger.default, color.bg.action.danger.hover, color.bg.action.danger.subtle, color.bg.surface.default, color.text.primary, color.text.on.brand, color.text.on.danger, color.text.action.brand, color.text.action.danger, color.border.default, color.border.strong, color.border.focus, radius.md

Accessibility

Role: button

Notes

• aria-label is required. TypeScript enforces it.
• For destructive icon-only actions, include a Tooltip describing what the action does.

Composes with

Component	Relation	Note
Tooltip	wraps	Wrap with Tooltip to expose what the icon means.
Button	alternative	Use Button when there is a text label.
ChatHeader	child	Common in right-aligned actions.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

menu trigger icon

“three-dot icon button with tooltip”

<TooltipTrigger><IconButton aria-label="More"><MoreIcon /></IconButton><Tooltip>More</Tooltip></TooltipTrigger>

Related

• Button
• Tooltip