Iconbutton
IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.
IconButtons provide compact action triggers using iconography, essential for clean, space-efficient interfaces.
Basic IconButton
The most basic form of an IconButton with an icon and proper accessibility attributes.
IconButton Sizes
IconButtons come in three sizes: small (32px), medium (40px), and large (48px). Choose based on interface requirements and accessibility needs.
Colored IconButtons
IconButtons can be colored using the color prop to convey different meanings or align with your design system's color palette.
Custom Styled IconButton
You can customize IconButtons using the sx prop to apply custom styling, including background colors, borders, and hover effects.
Disabled IconButton
IconButtons can be disabled to prevent user interaction when an action is not available or appropriate.
