ImageListItemBar API

API reference docs for the React ImageListItemBar component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

import ImageListItemBar from '@mui/material/ImageListItemBar';
// or
import { ImageListItemBar } from '@mui/material';

The name MuiImageListItemBar can be used when providing default props or style overrides in the theme.

Props of the native component are also available.

Name	Type	Default	Description
actionIcon	node		An IconButton element to be used as secondary action target (primary action target is the item itself).
actionPosition	'left' \| 'right'	'right'	Position of secondary action IconButton.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
position	'below' \| 'bottom' \| 'top'	'bottom'	Position of the title bar.
subtitle	node		String or element serving as subtitle (support text).
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
title	node		Title to be displayed.

The ref is forwarded to the root element.

Rule name	Global class	Description
root	.MuiImageListItemBar-root	Styles applied to the root element.
positionBottom	.MuiImageListItemBar-positionBottom	Styles applied to the root element if `position="bottom"`.
positionTop	.MuiImageListItemBar-positionTop	Styles applied to the root element if `position="top"`.
positionBelow	.MuiImageListItemBar-positionBelow	Styles applied to the root element if `position="below"`.
titleWrap	.MuiImageListItemBar-titleWrap	Styles applied to the title and subtitle container element.
titleWrapBelow	.MuiImageListItemBar-titleWrapBelow	Styles applied to the title and subtitle container element if `position="below"`.
titleWrapActionPosLeft	.MuiImageListItemBar-titleWrapActionPosLeft	Styles applied to the container element if `actionPosition="left"`.
titleWrapActionPosRight	.MuiImageListItemBar-titleWrapActionPosRight	Styles applied to the container element if `actionPosition="right"`.
title	.MuiImageListItemBar-title	Styles applied to the title container element.
subtitle	.MuiImageListItemBar-subtitle	Styles applied to the subtitle container element.
actionIcon	.MuiImageListItemBar-actionIcon	Styles applied to the actionIcon if supplied.
actionIconActionPosLeft	.MuiImageListItemBar-actionIconActionPosLeft	Styles applied to the actionIcon if `actionPosition="left"`.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.