ArcaneIconButton#

A compact button that displays only an icon, ideal for toolbars, action menus, and space-constrained interfaces.

Basic Usage#

ArcaneIconButton(
  icon: ArcaneIcon.x(),
  onPressed: () {
    print('Icon button pressed');
  },
)

Properties#

Style Constructors#

Quick access to common styles:

// Primary style
ArcaneIconButton.primary(
  icon: ArcaneIcon.plus(),
  onPressed: () {},
)

// Ghost style (default minimal)
ArcaneIconButton.ghost(
  icon: ArcaneIcon.settings(),
  onPressed: () {},
)

// Outline style
ArcaneIconButton.outline(
  icon: ArcaneIcon.search(),
  onPressed: () {},
)

// Destructive style
ArcaneIconButton.destructive(
  icon: ArcaneIcon.trash(),
  onPressed: () {},
)

Styles#

Ghost (Default)#

Minimal, transparent background:

ArcaneIconButton(
  icon: ArcaneIcon.search(),
  style: IconButtonStyle.ghost,
  onPressed: () {},
)

Primary#

Solid primary background:

ArcaneIconButton(
  icon: ArcaneIcon.plus(),
  style: IconButtonStyle.primary,
  onPressed: () {},
)

Outline#

Bordered with transparent background:

ArcaneIconButton(
  icon: ArcaneIcon.settings(),
  style: IconButtonStyle.outline,
  onPressed: () {},
)

Destructive#

For delete/remove actions:

ArcaneIconButton(
  icon: ArcaneIcon.trash(),
  style: IconButtonStyle.destructive,
  onPressed: () {},
)

Sizes#

// Small
ArcaneIconButton(
  icon: ArcaneIcon.check(),
  size: IconButtonSize.small,
  onPressed: () {},
)

// Medium (default)
ArcaneIconButton(
  icon: ArcaneIcon.check(),
  size: IconButtonSize.medium,
  onPressed: () {},
)

// Large
ArcaneIconButton(
  icon: ArcaneIcon.check(),
  size: IconButtonSize.large,
  onPressed: () {},
)

With Tooltip#

ArcaneIconButton(
  icon: ArcaneIcon.trash(),
  tooltip: 'Delete item',
  onPressed: () {},
)

Examples#

Toolbar#

ArcaneRow(
  gapSize: Gap.xs,
  children: [
    ArcaneIconButton(
      icon: ArcaneIcon.bold(),
      tooltip: 'Bold',
      onPressed: () => toggleBold(),
    ),
    ArcaneIconButton(
      icon: ArcaneIcon.italic(),
      tooltip: 'Italic',
      onPressed: () => toggleItalic(),
    ),
    ArcaneIconButton(
      icon: ArcaneIcon.underline(),
      tooltip: 'Underline',
      onPressed: () => toggleUnderline(),
    ),
  ],
)

Close Button#

For dialogs and modals, use a ghost icon button with the close icon:

ArcaneIconButton(
  icon: ArcaneIcon.x(),
  tooltip: 'Close',
  onPressed: () => closeDialog(),
)

Card Actions#

ArcaneRow(
  gapSize: Gap.sm,
  children: [
    ArcaneIconButton(
      icon: ArcaneIcon.edit(),
      tooltip: 'Edit',
      onPressed: () => editItem(),
    ),
    ArcaneIconButton.destructive(
      icon: ArcaneIcon.trash(),
      tooltip: 'Delete',
      onPressed: () => deleteItem(),
    ),
  ],
)

Related Components#

• ArcaneButton - Full button with label
• ArcaneFAB - Floating action button