@material-ui/lab

property action

action?: React.ReactNode;

• The action to display. It renders after the message, at the end of the alert.

property closeText

closeText?: string;

• Override the default label for the *close popup* icon button.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property color

color?: Color;

• The main color for the alert. Unless provided, the value is taken from the severity prop.

property icon

icon?: React.ReactNode | false;

• Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop.

property iconMapping

iconMapping?: Partial<Record<Color, React.ReactNode>>;

• The component maps the severity prop to a range of different icons, for instance success to <SuccessOutlined>. If you wish to change this mapping, you can provide your own. Alternatively, you can use the icon prop to override the icon displayed.

property onClose

onClose?: (event: React.SyntheticEvent) => void;

• Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon button is displayed that triggers the callback when clicked.

  Parameter event

  The event source of the callback.

property role

role?: string;

• The ARIA role attribute of the element.

property severity

severity?: Color;

• The severity of the alert. This defines the color and icon used.

property variant

variant?: 'standard' | 'filled' | 'outlined';

• The variant to use.

property children

children?: React.ReactNode;

• The content of the component.

property option

option: T;

property ChipProps

ChipProps?: object;

• Props applied to the [Chip](/api/chip/) element.

property clearText

clearText?: string;

• Override the default text for the *clear* icon button.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property closeIcon

closeIcon?: React.ReactNode;

• The icon to display in place of the default close icon.

property closeText

closeText?: string;

• Override the default text for the *close popup* icon button.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property disabled

disabled?: boolean;

• If true, the input will be disabled.

property disablePortal

disablePortal?: boolean;

• Disable the portal behavior. The children stay within it's parent DOM hierarchy.

property forcePopupIcon

forcePopupIcon?: true | false | 'auto';

• Force the visibility display of the popup icon.

property fullWidth

fullWidth?: boolean;

• If true, the input will take up the full width of its container.

property getLimitTagsText

getLimitTagsText?: (more: number) => React.ReactNode;

• The label to display when the tags are truncated (limitTags).

  Parameter more

  The number of truncated tags.

  Returns

  {ReactNode}

property limitTags

limitTags?: number;

• The maximum number of tags that will be visible when not focused. Set -1 to disable the limit.

property ListboxComponent

ListboxComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;

• The component used to render the listbox.

property ListboxProps

ListboxProps?: object;

• Props applied to the Listbox element.

property loading

loading?: boolean;

• If true, the component is in a loading state.

property loadingText

loadingText?: React.ReactNode;

• Text to display when in a loading state.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property noOptionsText

noOptionsText?: React.ReactNode;

• Text to display when there are no options.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property openText

openText?: string;

• Override the default text for the *open popup* icon button.

  For localization purposes, you can use the provided [translations](/guides/localization/).

property PaperComponent

PaperComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;

• The component used to render the body of the popup.

property PopperComponent

PopperComponent?: React.ComponentType<PopperProps>;

• The component used to position the popup.

property popupIcon

popupIcon?: React.ReactNode;

• The icon to display in place of the default popup icon.

property renderGroup

renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;

• Render the group.

  Parameter option

  The group to render.

  Returns

  {ReactNode}

property renderInput

renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;

• Render the input.

  Parameter params

  Returns

  {ReactNode}

property renderOption

renderOption?: (
    option: T,
    state: AutocompleteRenderOptionState
) => React.ReactNode;

• Render the option, use getOptionLabel by default.

  Parameter option

  The option to render.

  Parameter state

  The state of the component.

  Returns

  {ReactNode}

property renderTags

renderTags?: (
    value: T[],
    getTagProps: AutocompleteGetTagProps
) => React.ReactNode;

• Render the selected value.

  Parameter value

  The value provided to the component.

  Parameter getTagProps

  A tag props getter.

  Returns

  {ReactNode}

property size

size?: 'small' | 'medium';

• The size of the autocomplete.

property children

children: React.ReactNode;

property group

group: string;

property key

key: string;

property disabled

disabled: boolean;

property fullWidth

fullWidth: boolean;

property id

id: string;

property InputLabelProps

InputLabelProps: object;

property inputProps

inputProps: object;

property InputProps

InputProps: {
    ref: React.Ref<any>;
    className: string;
    startAdornment: React.ReactNode;
    endAdornment: React.ReactNode;
};

property size

size: 'small' | undefined;

property inputValue

inputValue: string;

property selected

selected: boolean;

property children

children?: React.ReactNode;

• The avatars to stack.

property max

max?: number;

• Max avatars to show before +x.

property spacing

spacing?: 'small' | 'medium' | number;

• Spacing between avatars.

property ignoreAccents

ignoreAccents?: boolean;

property ignoreCase

ignoreCase?: boolean;

property limit

limit?: number;

property matchFrom

matchFrom?: 'any' | 'start';

property stringify

stringify?: (option: T) => string;

property trim

trim?: boolean;

property getOptionLabel

getOptionLabel: (option: T) => string;

property inputValue

inputValue: string;

property value

value: number;

property defaultSelected

defaultSelected?: string[];

• Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string.

property multiSelect

multiSelect?: true;

• If true ctrl and shift will trigger multiselect.

property onNodeSelect

onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string[]) => void;

• Callback fired when tree items are selected/unselected.

  Parameter event

  The event source of the callback

  Parameter value

  of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

property selected

selected?: string[];

• Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.

property classKey

classKey: PaginationItemClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The active color.
     */
    color?: 'standard' | 'primary' | 'secondary';
    /**
     * If `true`, the item will be disabled.
     */
    disabled?: boolean;
    /**
     * The current page number.
     */
    page?: number;
    /**
     * If `true` the pagination item is selected.
     */
    selected?: boolean;
    /**
     * The shape of the pagination item.
     */
    shape?: 'round' | 'rounded';
    /**
     * The size of the pagination item.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The type of pagination item.
     */
    type?: UsePaginationItem['type'];
    /**
     * The pagination item variant.
     */
    variant?: 'text' | 'outlined';
};

property color

color?: 'primary' | 'secondary' | 'standard';

• The active color.

property getItemAriaLabel

getItemAriaLabel?: (
    type: 'page' | 'first' | 'last' | 'next' | 'previous',
    page: number,
    selected: boolean
) => string;

• Accepts a function which returns a string value that provides a user-friendly name for the current page.

  For localization purposes, you can use the provided [translations](/guides/localization/).

  Parameter type

  The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.

  Parameter page

  The page number to format.

  Parameter selected

  If true, the current page is selected.

  Returns

  {string}

property renderItem

renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;

• Render the item.

  Parameter params

  The props to spread on a PaginationItem.

  Returns

  {ReactNode}

property shape

shape?: 'round' | 'rounded';

• The shape of the pagination items.

property size

size?: 'small' | 'medium' | 'large';

• The size of the pagination component.

property variant

variant?: 'text' | 'outlined';

• The variant to use.

property color

color: PaginationProps['color'];

property shape

shape: PaginationProps['shape'];

property size

size: PaginationProps['size'];

property variant

variant: PaginationProps['variant'];

property defaultValue

defaultValue?: number;

• The default value. Use when the component is not controlled.

property disabled

disabled?: boolean;

• If true, the rating will be disabled.

property emptyIcon

emptyIcon?: React.ReactNode;

• The icon to display when empty.

property emptyLabelText

emptyLabelText?: React.ReactNode;

• The label read when the rating input is empty.

property getLabelText

getLabelText?: (value: number) => string;

• Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.

  For localization purposes, you can use the provided [translations](/guides/localization/).

  Parameter value

  The rating label's value to format.

  Returns

  {string}

property icon

icon?: React.ReactNode;

• The icon to display.

property IconContainerComponent

IconContainerComponent?: React.ElementType<IconContainerProps>;

• The component containing the icon.

property max

max?: number;

• Maximum rating.

property name

name?: string;

• The name attribute of the radio input elements. If readOnly is false, the prop is required, this input name`should be unique within the parent form.

property onChange

onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;

• Callback fired when the value changes.

  Parameter event

  The event source of the callback.

  Parameter value

  The new value.

property onChangeActive

onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void;

• Callback function that is fired when the hover state changes.

  Parameter event

  The event source of the callback.

  Parameter value

  The new value.

property precision

precision?: number;

• The minimum increment value change allowed.

property readOnly

readOnly?: boolean;

• Removes all hover effects and pointer events.

property size

size?: 'small' | 'medium' | 'large';

• The size of the rating.

property value

value?: number | null;

• The rating value.

property defaultSelected

defaultSelected?: string;

• Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string.

property multiSelect

multiSelect?: false;

• If true ctrl and shift will trigger multiselect.

property onNodeSelect

onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string) => void;

• Callback fired when tree items are selected/unselected.

  Parameter event

  The event source of the callback

  Parameter value

  of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

property selected

selected?: string;

• Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.

property classKey

classKey: SkeletonClassKey;

property defaultComponent

defaultComponent: 'div';

property props

props: P & {
    animation?: 'pulse' | 'wave' | false;
    children?: React.ReactNode;
    height?: number | string;
    variant?: 'text' | 'rect' | 'circle';
    width?: number | string;
};

property delay

delay?: number;

• Adds a transition delay, to allow a series of SpeedDialActions to be animated.

property FabProps

FabProps?: Partial<FabProps>;

• Props applied to the [Fab](/api/fab/) component.

property icon

icon?: React.ReactNode;

• The Icon to display in the SpeedDial Fab.

property TooltipClasses

TooltipClasses?: TooltipProps['classes'];

• classes prop applied to the [Tooltip](/api/tooltip/) element.

property tooltipOpen

tooltipOpen?: boolean;

• Make the tooltip always visible when the SpeedDial is open.

property tooltipPlacement

tooltipPlacement?: TooltipProps['placement'];

• Placement of the tooltip.

property tooltipTitle

tooltipTitle?: React.ReactNode;

• Label to display in the tooltip.

property icon

icon?: React.ReactNode;

• The icon to display in the SpeedDial Floating Action Button.

property open

open?: boolean;

• If true, the SpeedDial is open.

property openIcon

openIcon?: React.ReactNode;

• The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.

property ariaLabel

ariaLabel: string;

• The aria-label of the button element. Also used to provide the id for the SpeedDial element and its children.

property children

children?: React.ReactNode;

• SpeedDialActions to display when the SpeedDial is open.

property direction

direction?: 'up' | 'down' | 'left' | 'right';

• The direction the actions open relative to the floating action button.

property FabProps

FabProps?: Partial<FabProps>;

• Props applied to the [Fab](/api/fab/) element.

property hidden

hidden?: boolean;

• If true, the SpeedDial will be hidden.

property icon

icon?: React.ReactNode;

• The icon to display in the SpeedDial Fab. The SpeedDialIcon component provides a default Icon with animation.

property onClose

onClose?: (event: React.SyntheticEvent<{}>, reason: CloseReason) => void;

• Callback fired when the component requests to be closed.

  Parameter event

  The event source of the callback.

  Parameter reason

  Can be: "toggle", "blur", "mouseLeave", "escapeKeyDown".

property onOpen

onOpen?: (event: React.SyntheticEvent<{}>, reason: OpenReason) => void;

• Callback fired when the component requests to be open.

  Parameter event

  The event source of the callback.

  Parameter reason

  Can be: "toggle", "focus", "mouseEnter".

property open

open: boolean;

• If true, the SpeedDial is open.

property openIcon

openIcon?: React.ReactNode;

• The icon to display in the SpeedDial Fab when the SpeedDial is open.

property TransitionComponent

TransitionComponent?: React.ComponentType<TransitionProps>;

• The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property transitionDuration

transitionDuration?: TransitionProps['timeout'];

• The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

property TransitionProps

TransitionProps?: TransitionProps;

• Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

property children

children?: React.ReactNode;

• The content of the component.

property value

value: string;

• The value of the currently selected Tab.

property idPrefix

idPrefix: string;

property value

value: string;

property classKey

classKey: TabListClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & Omit<TabsTypeMap['props'], 'value'>;

property children

children?: React.ReactNode;

• The content of the component.

property value

value: string;

• The value of the corresponding Tab. Must use the index of the Tab when no value was passed to Tab.

property children

children?: React.ReactNode;

• The content of the component.

property children

children?: React.ReactNode;

• The content of the component.

property children

children?: React.ReactNode;

• The content of the component.

property color

color?: 'inherit' | 'primary' | 'secondary' | 'grey';

• The dot can have a different colors.

property variant

variant?: 'default' | 'outlined';

• The dot can appear filled or outlined.

property children

children?: React.ReactNode;

• The content of the component.

property children

children?: React.ReactNode;

• The content of the component.

property align

align?: 'left' | 'right' | 'alternate';

• The position where the timeline's content should appear.

property children

children?: React.ReactNode;

• The content of the component.

property children

children?: React.ReactNode;

• The content of the component.

property children

children?: React.ReactNode;

• The content of the button.

property exclusive

exclusive?: boolean;

• If true, only allow one of the child ToggleButton values to be selected.

property onChange

onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;

• Callback fired when the value changes.

  Parameter event

  The event source of the callback.

  Parameter value

  of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array.

property orientation

orientation?: 'horizontal' | 'vertical';

• The group orientation (layout flow direction).

property size

size?: 'small' | 'medium' | 'large';

• The size of the buttons.

property value

value?: any;

• The currently selected value within the group or an array of selected values when exclusive is false.

  The value must have reference equality with the option in order to be selected.

property children

children?: React.ReactNode;

• The content of the component.

property collapseIcon

collapseIcon?: React.ReactNode;

• The icon used to collapse the node.

property endIcon

endIcon?: React.ReactNode;

• The icon displayed next to a end node.

property expandIcon

expandIcon?: React.ReactNode;

• The icon used to expand the node.

property icon

icon?: React.ReactNode;

• The icon to display next to the tree node's label.

property label

label?: React.ReactNode;

• The tree node label.

property nodeId

nodeId: string;

• The id of the node.

property onIconClick

onIconClick?: React.MouseEventHandler;

• onClick handler for the icon container. Call event.preventDefault() to prevent onNodeToggle from being called.

property onLabelClick

onLabelClick?: React.MouseEventHandler;

• onClick handler for the label container. Call event.preventDefault() to prevent onNodeToggle from being called.