전체 카탈로그
ActionButton9 props

Icon Button

A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.

공식 문서 열기
live previewAction

Preview

Import

import {IconButton} from '@astryxdesign/core/IconButton';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.

icon-buttoniconbuttontoolbaractioncompact

Important props

variantprimary | secondary | ghost | destructiveoptional
sizesm | md | lgoptional
clickAction(e: MouseEvent) => void | Promise<void>optional

Theming targets

이 항목은 공개 theming target이 문서화되어 있지 않습니다.

Best practices

  • DoMake the aria-label specific: a trash icon labeled "Delete conversation" is clearer than just "Delete" for screen readers.
  • DoAdd a tooltip: even a gear icon can mean Settings, Preferences, or Configure.
  • DoUse ghost in toolbars and dense areas to reduce visual clutter.
  • Do notUse IconButton if the action isn't obvious from the icon alone; use Button with text.