Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface FabProps<M>

Type parameters

  • M: OverridableTypeMap

Hierarchy

  • { children: NonNullable<React.ReactNode>; color?: PropTypes.Color; disableFocusRipple?: undefined | false | true; disableRipple?: undefined | false | true; disabled?: undefined | false | true; href?: undefined | string; size?: "small" | "medium" | "large"; variant?: "circular" | "extended" | "round" } & { TouchRippleProps?: Partial<TouchRippleProps>; action?: React.Ref<ButtonBaseActions>; centerRipple?: undefined | false | true; children?: React.ReactNode; disableRipple?: undefined | false | true; disableTouchRipple?: undefined | false | true; disabled?: undefined | false | true; focusRipple?: undefined | false | true; focusVisibleClassName?: undefined | string; onFocusVisible?: React.FocusEventHandler<any>; tabIndex?: string | number } & CommonProps<ExtendButtonBaseTypeMap<{ classKey: FabClassKey; defaultComponent: D; props: P & { children: NonNullable<React.ReactNode>; color?: PropTypes.Color; disableFocusRipple?: undefined | false | true; disableRipple?: undefined | false | true; disabled?: undefined | false | true; href?: undefined | string; size?: "small" | "medium" | "large"; variant?: "circular" | "extended" | "round" } }>> & {}
    • FabProps

Index

Properties

Properties

Optional TooltipProps

TooltipProps: Partial<Omit<TooltipProps, "title">>

Props applied to the Tooltip element

Optional TouchRippleProps

TouchRippleProps: Partial<TouchRippleProps>

Props applied to the TouchRipple element.

Optional action

action: React.Ref<ButtonBaseActions>

A ref for imperative actions. It currently only supports focusVisible() action.

Optional centerRipple

centerRipple: undefined | false | true

If true, the ripples will be centered. They won't start at the cursor interaction position.

children

children: NonNullable<React.ReactNode>

The content of the button.

Optional className

className: undefined | string

Optional classes

classes: Partial<ClassNameMap<M["classKey"]>>

Override or extend the styles applied to the component.

Optional color

color: PropTypes.Color

The color of the component. It supports those theme colors that make sense for this component.

Optional disableFocusRipple

disableFocusRipple: undefined | false | true

If true, the keyboard focus ripple will be disabled.

Optional disableRipple

disableRipple: undefined | false | true

If true, the ripple effect will be disabled.

Optional disableTooltip

disableTooltip: undefined | false | true

When true, FAB will not have a Tooltip on hover

Optional disableTouchRipple

disableTouchRipple: undefined | false | true

If true, the touch ripple effect will be disabled.

Optional disabled

disabled: undefined | false | true

If true, the button will be disabled.

Optional focusRipple

focusRipple: undefined | false | true

If true, the base button will have a keyboard focus ripple.

Optional focusVisibleClassName

focusVisibleClassName: undefined | string

This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.

Optional href

href: undefined | string

The URL to link to when the button is clicked. If defined, an a element will be used as the root node.

Optional innerRef

innerRef: React.Ref<any>

Optional onFocusVisible

onFocusVisible: React.FocusEventHandler<any>

Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too.

Optional size

size: "small" | "medium" | "large"

The size of the button. small is equivalent to the dense button styling.

Optional style

style: React.CSSProperties

Optional tabIndex

tabIndex: string | number

Optional tooltipContent

tooltipContent: TooltipProps["title"]

The content to put in the on-hover tooltip

Optional variant

variant: "circular" | "extended" | "round"

The variant to use. 'round' is deprecated, use 'circular' instead.

Generated using TypeDoc