Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/button

Index

Type aliases

ButtonTheme

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

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

ButtonType: "text" | "icon"

One of the valid button types that can be used

FABPosition

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

The position within the viewport for the floating action button.

UnstyledButtonProps

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.

Variables

Button

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

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

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.

Functions

buttonThemeClassNames

  • 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.

    Parameters

    Returns string

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

Generated using TypeDoc