1.5 KiB
1.5 KiB
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
- Minimum Hit Area: Always maintain at least a 48x48dp hit area, even if the icon is smaller.
- Visual Consistency: Use filled variants for primary actions and standard/outlined for secondary ones.
- Accessibility Labels: Every icon button MUST have a
tooltiporSemanticslabel.