📌 Tasks
🚀 New variants & attributes introduced in 3.3.0
✨ Variants:
'filled' (default): Matches pre-3.3.0 button appearance'outlined': Outlined button with transparent background'text': Button with no background or border'icon': Icon-only button with no label or surrounding decoration
✨ Attributes:
-
icon ('icon' variant only):
Defines the icon displayed in the button.
-
startIcon ('filled', 'outlined' & 'text' variants only):
Renders an icon before the button label.
-
endIcon ('filled', 'outlined' & 'text' variants only):
Renders an icon after the button label.
-
color (all variants):
Sets the background color for 'filled', 'outlined', and 'text' variants, which default to '#90caf9'. For the 'icon' variant, the color is undefined by default and is determined by the SVG icon itself.
-
size ('icon' variant only):
Controls the size of the icon within the button. Defaults to '16px'.
-
fullWidth ('filled', 'outlined' & 'text' variants only):
Follows MUI’s fullWidth behavior. However, it defaults to true in 3.3.0 to maintain backward compatibility. Will default to false in 4.0.0.
-
url (all variants):
When defined, clicking the button will open the specified URL in a new browser tab. Intended for external navigation.
-
placement (all variants):
Aligns the prop within its container. Valid options: 'topLeft', 'topCenter', 'topRight', 'center', 'left', 'right', 'bottomLeft', 'bottomCenter', and 'bottomRight'.
-
propStyle (all variants):
Escape hatch for applying custom styles directly to the prop (not its container).
- Named
propStyle to avoid confusion with the existing style key, which currently targets the container via the layout structure.
- Will be renamed to
style in 4.0.0 as part of a prop-level style refactor.
💬 RFC
- Should we introduce any additional variants or attributes for the
'button' prop?
- Should the
url attribute be supported across all variants?
- If a
url is defined, should it suppress any apiCommand action that would otherwise be triggered on click/tap?
- Are there existing UX or styling issues that we should handle?
Feel free to share thoughts or feedback.
📌 Tasks
'button'propcave_utils)🚀 New variants & attributes introduced in
3.3.0✨ Variants:
'filled'(default): Matches pre-3.3.0button appearance'outlined': Outlined button with transparent background'text': Button with no background or border'icon': Icon-only button with no label or surrounding decoration✨ Attributes:
icon('icon'variant only):Defines the icon displayed in the button.
startIcon('filled','outlined'&'text'variants only):Renders an icon before the button label.
endIcon('filled','outlined'&'text'variants only):Renders an icon after the button label.
color(all variants):Sets the background color for
'filled','outlined', and'text'variants, which default to'#90caf9'. For the'icon'variant, the color isundefinedby default and is determined by the SVG icon itself.size('icon'variant only):Controls the size of the icon within the button. Defaults to
'16px'.fullWidth('filled','outlined'&'text'variants only):Follows MUI’s
fullWidthbehavior. However, it defaults totruein3.3.0to maintain backward compatibility. Will default tofalsein4.0.0.url(all variants):When defined, clicking the button will open the specified URL in a new browser tab. Intended for external navigation.
placement(all variants):Aligns the prop within its container. Valid options:
'topLeft','topCenter','topRight','center','left','right','bottomLeft','bottomCenter', and'bottomRight'.propStyle(all variants):Escape hatch for applying custom styles directly to the prop (not its container).
propStyleto avoid confusion with the existingstylekey, which currently targets the container via thelayoutstructure.stylein4.0.0as part of a prop-level style refactor.💬 RFC
'button'prop?urlattribute be supported across all variants?urlis defined, should it suppress anyapiCommandaction that would otherwise be triggered on click/tap?Feel free to share thoughts or feedback.