ArcaneIconButton#

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

Basic Usage#

ArcaneIconButton(
  icon: span([text('✕')]),
  onPressed: () {
    print('Icon button pressed');
  },
)

Properties#

Variants#

Ghost (Default)#

Minimal, transparent background:

ArcaneIconButton(
  icon: span([text('🔍')]),
  variant: IconButtonVariant.ghost,
  onPressed: () {},
)

Filled#

Solid background:

ArcaneIconButton(
  icon: span([text('➕')]),
  variant: IconButtonVariant.filled,
  onPressed: () {},
)

Outline#

Bordered with transparent background:

ArcaneIconButton(
  icon: span([text('⚙')]),
  variant: IconButtonVariant.outline,
  onPressed: () {},
)

Sizes#

// Small
ArcaneIconButton(
  icon: span([text('✓')]),
  size: IconButtonSize.small,
  onPressed: () {},
)

// Medium (default)
ArcaneIconButton(
  icon: span([text('✓')]),
  size: IconButtonSize.medium,
  onPressed: () {},
)

// Large
ArcaneIconButton(
  icon: span([text('✓')]),
  size: IconButtonSize.large,
  onPressed: () {},
)

With Tooltip#

ArcaneIconButton(
  icon: span([text('🗑')]),
  tooltip: 'Delete item',
  onPressed: () {},
)

Examples#

Toolbar#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    gap: Gap.xs,
    padding: PaddingPreset.sm,
    background: Background.surface,
    borderRadius: Radius.md,
  ),
  children: [
    ArcaneIconButton(
      icon: span([text('B')]),
      tooltip: 'Bold',
      onPressed: () => toggleBold(),
    ),
    ArcaneIconButton(
      icon: span([text('I')]),
      tooltip: 'Italic',
      onPressed: () => toggleItalic(),
    ),
    ArcaneIconButton(
      icon: span([text('U')]),
      tooltip: 'Underline',
      onPressed: () => toggleUnderline(),
    ),
    ArcaneDivider(direction: DividerDirection.vertical),
    ArcaneIconButton(
      icon: span([text('🔗')]),
      tooltip: 'Insert link',
      onPressed: () => insertLink(),
    ),
  ],
)

Card Actions#

ArcaneCard(
  children: [
    // Card content...
    ArcaneDiv(
      styles: const ArcaneStyleData(
        display: Display.flex,
        justifyContent: JustifyContent.flexEnd,
        gap: Gap.sm,
      ),
      children: [
        ArcaneIconButton(
          icon: span([text('✏')]),
          tooltip: 'Edit',
          onPressed: () => editItem(),
        ),
        ArcaneIconButton(
          icon: span([text('🗑')]),
          tooltip: 'Delete',
          onPressed: () => deleteItem(),
        ),
      ],
    ),
  ],
)

Table Row Actions#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    gap: Gap.xs,
  ),
  children: [
    ArcaneIconButton(
      icon: span([text('👁')]),
      size: IconButtonSize.small,
      tooltip: 'View',
      onPressed: () => viewItem(id),
    ),
    ArcaneIconButton(
      icon: span([text('✏')]),
      size: IconButtonSize.small,
      tooltip: 'Edit',
      onPressed: () => editItem(id),
    ),
    ArcaneIconButton(
      icon: span([text('⋮')]),
      size: IconButtonSize.small,
      tooltip: 'More',
      onPressed: () => showMenu(id),
    ),
  ],
)

Related Components#

• ArcaneButton - Full button with label
• ArcaneCloseButton - Close/dismiss button
• ArcaneFAB - Floating action button