Resources
Intro & Anatomy
Buttons are interactive components that help users take action, make choices, and move forward during a process, e.g. checkout, form, etc. Use buttons for a specific action or in a contextual process.
MDX also offers button as a link for actions that navigate to different pages while maintaining button styling, e.g. "View details," "Learn more," or "Go to checkout.”
Options & Styles
Label & Icon
Labels are always required unless you're using an icon button.
Icons are optional but shouldn't be decorative – only use them when necessary and when they strongly relate to the label text.
Icons can be placed left or right of the label.
Type
MDX offers 4 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 buttons come in three different sizes: small, medium and large.
Medium is the default size and should be used in most cases unless specific design requirements call for a different size.
Width
Buttons can be either full-width or auto-width depending on the content, container or screen size. On default, the width automatically adapts its content.
Don't use full-width buttons on areas larger than 400px.
Disabled
A disabled 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.
Loading
A loading spinner shows instead of the label when an action is currently being processed, e.g. while submitting a form.
The loading spinner provides feedback and prevents users from clicking multiple times.
Best Practice & Usage
Buttons should communicate their purpose clearly using text labels, icons, or both. Avoid generic labels such as "Okay" or "Cancel" and use specific action-oriented language like "Delete profile."
Apply sentence case formatting (capitalise the first letter, use lowercase for the remainder) as in "Complete order."
Use short labels to concisely signal a buttons intent, e.g. "Add to cart" and "Complete Order"
Avoid long sentences or non-descriptive labels like "click here" to prevent UI clutter.
Use descriptive verbs or commands like "Complete order" or "Publish."
Avoid generic labels like "yes," "no," and "okay."
Use icons only when they help communicate function. In button groups, only the primary button should have an icon.
Avoid using too many icons in button groups. Don't use icons in non-primary buttons.
Use a primary button to signal the highest emphasis and guide users to the desired action.
Don't overuse primary buttons to avoid confusing users. Use non-primary buttons instead.
Align buttons on the right-hand side of a component or pattern.
Buttons generally shouldn't take up 100% width except on mobile.
Scale buttons to 100vw on mobile. If there's more than one button, stack them.
Buttons generally shouldn't be displayed next to each other on mobile. Be mindful of hit areas and spacing.
Theming
You can customise colours, border width and radius, font styles, 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.