MudButton outlined border uses TextPrimary, making border & text inseparable (unlike inputs which use the LinesInputs variable)
#12,002 创建于 2025年10月26日
仓库指标
- Star
- (10,394 star)
- PR 合并指标
- (平均合并 6天 6小时) (30 天内合并 108 个 PR)
描述
Before reporting
- I searched existing issues
- I tried in private/incognito browser
What went wrong?
Bug type Component
Component name MudButton
What happened? When theming, I can give outlined inputs a lighter border via Palette(Light/Dark).LinesInputs and a darker text via TextPrimary. However, for MudButton with Variant="Variant.Outlined", both the border and text colors are tied to TextPrimary (at least for Color="Default"), making it impossible to style a lighter outline with darker text using the theme alone.
This creates an inconsistency with inputs and makes it hard to achieve desired styling and accessible contrast styles for outlined buttons.
Current behavior MudTextField / MudSelect with Variant="Variant.Outlined": Outline/border color comes from LinesInputs. Text color comes from TextPrimary. ✅ I can set a lighter border + darker text. MudButton with Variant="Outlined" and Color="Default": Both text and border use TextPrimary. ❌ I cannot independently style border vs text via the theme.
Expected behavior Outlined buttons should expose a separate theme token for their border color (similar to LinesInputs) so the border can be lighter than the text. For example: A new palette property like LinesButtons (mapped to --mud-palette-lines-buttons) that MudButton outlined variant uses for its border when Color="Default". Or at minimum, a specific CSS var used for the border in outlined buttons that can be overridden independently. This would bring consistency with outlined inputs and enable accessible designs (light borders, darker labels) without one-off CSS overrides.
Reproduction link
https://try.mudblazor.com/snippet/wEmTvkQqYbSuewps
Reproduction steps
- Declare MudButton as Outlined variant.
- Assign a custom theme and change the TextPrimary.
Version (bug)
v8.13.0
Version (working)
No response
Environment
Chrome
Blazor rendering mode
Server