Resources
Intro & Anatomy
Icon buttons are interactive components that use universally recognisable icons to trigger actions without requiring text labels. Use icon buttons for secondary actions or when space is limited, e.g. editing, deleting, or favouriting items where the icon meaning is clear and intuitive.
MDX also offers icon button as a link for actions that navigate to different pages while maintaining button styling.
Options & Styles
Icon
Icons are required and should be universally recognisable icons, such as a heart for like, a basket for cart, etc.
Types
MDX offers 4 icon button variants for clear visual hierarchy:
Primary for main actions
Secondary for secondary actions
Tertiary for supporting actions styled as text links
Quaternary for subtle, less important interactions
Sizes
MDX icon buttons come in three different sizes:
small, medium and large.
Variants
MDX offers 2 icon button variants for different design preferences:
rounded & square
Disabled
A disabled icon button shows that an action exists but isn't currently available, like when a form hasn't been completed.
We recommend avoiding disabled buttons when possible, as they don't explain why the button isn’t usable, and aren't accessible via keyboard navigation.
Best Practice & Usage
Icon buttons should use universally recognisable icons that clearly communicate their purpose without requiring additional context.
Use icon buttons for secondary actions where space efficiency is important whilst ensuring accessibility through proper labelling.
Use icon buttons for secondary or tertiary actions in button groups.
Always use text buttons for primary actions in groups, except when all buttons are icon-only.
Use icon buttons when an icon triggers functionality, e.g. a close icon in a modal should be an icon button rather than a decorative icon.
Icon buttons can not be used instead of regular buttons in places where the action needs to be properly communicated to the user.
Icon buttons can be grouped together. To avoid cognitive overload, use up to four icon buttons in a group.
Too many icon buttons in a group can cause cognitive overload and confusion. Limit icon button groups to four.
Theming
You can customise colours, border width and radius, spacing, and paddings.
When not using MDX icons, a slot is available to use your own icon library or SVG icons.
We recommend not changing the medium button height as it meets the minimum accessibility criteria requirements.