Icon Button @astryx-svelte/core v0.3.0 · IconButton
Usage
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.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Make the aria-label specific: a trash icon labeled "Delete conversation" is clearer than just "Delete" for screen readers. |
| Do | Add a tooltip: even a gear icon can mean Settings, Preferences, or Configure. |
| Do | Use ghost in toolbars and dense areas to reduce visual clutter. |
| Don't | Use IconButton if the action isn't obvious from the icon alone; use Button with text. |
| Don't | Skip the tooltip; label only reaches screen readers, sighted users need the hover hint. |
Examples
Common configurations, variations, and states.IconButton — Action Bar
Row of ghost icon buttons for a compact action toolbar
IconButton — Floating
A floating action button (FAB). The most common floating-button shape is icon-only. Raised here with
elevation="high". IconButton — Loading State
Icon buttons that show a loading spinner on click for async feedback
IconButton — With Tooltips
Icon buttons with tooltips that explain each action on hover