Usage

IconButton displays one icon. The icon must clearly identify the action. Set label to provide an accessible name:

<script setup lang="ts">
import { IconButton } from '@astryx-vue/core/IconButton'
</script>

<template>
  <IconButton label="Search">
    <span class="i-carbon-search" />
  </IconButton>
</template>

astryx-vue ships no icon set, so the artwork is yours: the icon slot takes a CSS icon class from whatever solution you already use (UnoCSS, Tailwind, or a class of your own) or your own component. UnoCSS's icon preset makes the glyph fill its container, and the button already sizes that box, so a bare <span class="i-carbon-search" /> is enough here; elsewhere give the icon an element with a size of its own.

Use a text-bearing Button when the action is not immediately clear.

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

Action bar

Use low-emphasis icon-only buttons in an action bar to keep frequent controls compact.

Floating action

Icon-only controls are a common floating-action shape. Set elevation="high" to emphasize the floating action.

Async state

The button shows a loading indicator during asynchronous work and prevents duplicate activation until it settles.

Tooltip

A tooltip explains the icon to sighted users, but it never replaces the required label.