Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface PaginationButtonProps<M>

Type parameters

  • M: OverridableTypeMap

Hierarchy

  • { color?: PropTypes.Color; disableFocusRipple?: undefined | false | true; edge?: "start" | "end" | false; size?: "small" | "medium" } & { 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: IconButtonClassKey; defaultComponent: D; props: P & { color?: PropTypes.Color; disableFocusRipple?: undefined | false | true; edge?: "start" | "end" | false; size?: "small" | "medium" } }>> & {}
    • PaginationButtonProps

Index

Properties

Properties

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.

Optional children

children: React.ReactNode

The content of the component.

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

Optional disableFocusRipple

disableFocusRipple: undefined | false | true

Optional disableRipple

disableRipple: undefined | false | true

If true, the ripple effect will be disabled.

⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.

Optional disableTouchRipple

disableTouchRipple: undefined | false | true

If true, the touch ripple effect will be disabled.

Optional disabled

disabled: undefined | false | true

If true, the base button will be disabled.

Optional edge

edge: "start" | "end" | false

If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).

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.

icon

icon: ReactNode

The icon to show inside the {@link IconButton}

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"

Optional style

style: React.CSSProperties

Optional tabIndex

tabIndex: string | number

Generated using TypeDoc