Button variant roles
button-variant-roles
Text = less-pronounced (typical in dialogs and cards; on cards, text buttons keep emphasis on card content). Contained = high-emphasis (elevation + fill); primary to the app. Outlined = medium-emphasis: important but not the primary; lower than contained, higher than text.
Description
Text buttons are less pronounced—typical in dialogs and cards so card content stays primary. Contained is high emphasis with elevation and fill for the app primary. Outlined is medium: important but not primary, sitting between contained and text. Match variant to that role map so emphasis stays honest. Fail if contained is used for a low-emphasis card action, or text is used as the app’s primary. Apply when choosing MUI button variants for dialogs, cards, and primary actions.
When to use
Choosing button variants for dialogs, cards, and app primary actions.
Not when
Not for links styled as text without button semantics, or icon-only affordances.
Agent hint
Map text/outlined/contained to emphasis; keep contained for the app primary.
Variant matches that role map (text / outlined / contained).
Contained used for a low-emphasis card action, or text used as the app's primary.
Citations
MUI — Button
https://mui.com/material-ui/react-button/