Acronis UIKit
Components

ButtonIcon

An icon-only button for compact, glyph-driven actions.

Usage

import { ButtonIcon } from '@acronis-platform/ui-react';

ButtonIcon is a square (32px) icon-only <button>. The icon is passed as children. It is polymorphic via Base UI's useRender (the render prop). Always provide an aria-label (or aria-labelledby) so the control has an accessible name.

Examples

Two visual variants — ghost (default, no border) and secondary (1px border):

import { PencilIcon } from '@acronis-platform/icons-react/stroke-mono';

<ButtonIcon aria-label="Edit">
  <PencilIcon />
</ButtonIcon>

<ButtonIcon variant="secondary" aria-label="Edit">
  <PencilIcon />
</ButtonIcon>

Disabled state:

<ButtonIcon aria-label="Edit" disabled>
  <PencilIcon />
</ButtonIcon>

API Reference

Prop

Type

Edit on GitHub

On this page