Skip to content
HuxerUIHuxerUIHuxerUI

IconButton

IconButton displays an icon-only action. Its semantic label is required because the visible icon is not sufficient accessible text.

Supply icon and meaning

Section titled “Supply icon and meaning”
IconButton(app::images::search, "Search")
    .OnClick(OpenSearch)
    .With(Tooltip("Search"))

Icons may be ImageResource, ImageAsset, or VectorAsset. Resource and vector forms can follow resource and theme configuration without application-side platform code.

Interaction and theme

Section titled “Interaction and theme”

The shared activation path handles pointer input, Enter, and Space. Enabled(false) disables activation and resolves disabled icon styling.

IconButtonStyle owns foreground colors, icon size, minimum interactive size, state-layer size, radius, and optional indication. The required StringVariant label becomes button semantics; add Tooltip when sighted pointer users also need a textual explanation.

API

Section titled “API”
  • Constructors: IconButton(ImageResource|ImageAsset|VectorAsset, StringVariant semantic_label).
  • Event: .OnClick(function).
  • Common modifiers: Enabled, Tooltip, Frame, Semantics.
  • Theme style: IconButtonStyle.

Use Button when text is part of the visible action.

Size, state layer, and icon ownership

Section titled “Size, state layer, and icon ownership”

The declared signature is IconButton(ImageVariant icon, StringVariant semantic_label) in <huxerui/view.h>, namespace huxerui. Image values are retained by the declaration; pass resources directly so resolution follows the active configuration. The semantic label can also be a string resource. OnClick accepts void().

IconButtonStyle field Effect
foreground, disabled_foreground Icon tint for enabled and disabled states.
icon_size Visible image size.
minimum_interactive_size Minimum hit-target dimensions, separate from visible icon size.
state_layer_size Visible hover/pressed feedback area.
corner_radius State-layer rounding.
indication Optional interaction visual override.

Material uses a 48-DIP interactive target while displaying a smaller icon and state layer. A tight Frame can constrain that target, so do not size the whole control to the glyph merely to make the glyph smaller. Change icon_size through the theme instead.

For a toggle action, keep selection in application state and choose the icon/semantic label from that state, or use a selectable Chip. A tooltip supplements the accessible label; it does not replace the constructor’s required label.