Variable StyledButton`Const`

StyledButton: StyledComponent<
    ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,

            | "className"
            | "style"
            | "classes"
            | "action"
            | "centerRipple"
            | "children"
            | "disabled"
            | "disableRipple"
            | "disableTouchRipple"
            | "focusRipple"
            | "focusVisibleClassName"
            | "LinkComponent"
            | "onFocusVisible"
            | "sx"
            | "tabIndex"
            | "TouchRippleProps"
            | "touchRippleRef"
            | "href"
            | "color"
            | "disableElevation"
            | "disableFocusRipple"
            | "endIcon"
            | "fullWidth"
            | "loading"
            | "loadingIndicator"
            | "loadingPosition"
            | "size"
            | "startIcon"
            | "variant",
    > & MUIStyledCommonProps<Theme> & {},
    {},
    {},
> = ...

Styled button component with dynamic theming

Component

StyledButton

Description

A highly customizable button component that adapts to theme and variant. Features include:

Dynamic background and text colors based on theme mode and variant
Smooth hover and active state transitions
Responsive shadow effects
Consistent border radius

Param: props

Material-UI Button props

Param: props.variant

Button variant ('contained', 'outlined', or 'text')

Example

<StyledButton variant="contained">Submit</StyledButton>
<StyledButton variant="outlined">Cancel</StyledButton>