skills/material3-expressive-flutter/references/components/icon-buttons.md

Icon Buttons - M3 Expressive Component

Overview

Icon buttons in M3 Expressive prioritize touch target size and visual clarity. They come in several variants: standard, filled, tonal, and outlined.

Variants

• Standard: No container, low visual emphasis.
• Filled: High emphasis, solid color background.
• Tonal: Lightly colored background, balanced emphasis.
• Outlined: Explicit border, medium emphasis.

Implementation in Flutter

1. Filled Icon Button (Expressive)

IconButton.filled(
  iconSize: 24,
  style: IconButton.styleFrom(
    backgroundColor: Theme.of(context).colorScheme.primary,
    foregroundColor: Theme.of(context).colorScheme.onPrimary,
    minimumSize: const Size(48, 48), // Ensure touch target
  ),
  onPressed: () {},
  icon: const Icon(Icons.add),
)

2. Tonal Icon Button

IconButton.filledTonal(
  onPressed: () {},
  icon: const Icon(Icons.favorite),
)

3. Outlined Icon Button

IconButton.outlined(
  onPressed: () {},
  icon: const Icon(Icons.share),
)

Best Practices

1. Minimum Hit Area: Always maintain at least a 48x48dp hit area, even if the icon is smaller.
2. Visual Consistency: Use filled variants for primary actions and standard/outlined for secondary ones.
3. Accessibility Labels: Every icon button MUST have a tooltip or Semantics label.

Related Components

• Common Buttons
• Toolbars
• FAB Menu