• Public
  • Public/Protected
  • All

Module @react-md/button


Type aliases

ButtonTheme: "clear" | "primary" | "secondary" | "warning" | "error" | "disabled"

One of the valid material design default button themes that can be used. This will update the general look and feel by updating the colors within the button while the ButtonThemeType will update the borders or box shadow.

ButtonThemeType: "flat" | "outline" | "contained"

One of the valid material design "themed" button types that can be used. This will update the general look and feel by adding borders or box shadow to the button while the ButtonTheme will update the colors.

ButtonType: "text" | "icon"

One of the valid button types that can be used

FABPosition: null | "bottom-left" | "bottom-right" | "top-left" | "top-right"

The position within the viewport for the floating action button.

UnstyledButtonProps: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">

The props for the unstyled button are just all the normal button html attributes without the type since this component forces the type="button" value.


Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = ...

The Button component is a simple wrapper for the <button> element that defaults the type attribute to "button" so that it does not automatically submit forms by default. It also supports multiple themes, rendering as an icon button, or even as a floating action button.

The default theme will be a clear text button unless the floating prop has been provided where it will render as an icon button by default instead.

FAB: ForwardRefExoticComponent<FABProps & RefAttributes<HTMLSpanElement>> = ...

This is a simple wrapper for the Button component that will conditionally render the Button in a <span> to render as a floating action button.

Note: You probably don't really want to use this externally since this is really just required so that the click and focus states behavior will still be contained within the button. The states behavior requires position: relative to work while changing into a floating action button makes it position: fixed.

UnstyledButton: ForwardRefExoticComponent<UnstyledButtonProps & RefAttributes<HTMLButtonElement>> = ...

The unstyled button is a really simple button element that resets the default browser button styles into a clear clickable element.


  • Creates a button theme based on the button theming props. This is really just used so that other elements like clickable <div>s or <input type="file"> can look like buttons.


    • props: ButtonThemeProps

      An object containing the themeable button props to generate a button theme className.

    Returns string

    a string of class names to create an element with a button theme.

Generated using TypeDoc