ListItem

ListItem provides a rich list-entry layout. It is interactive by default and renders as a button, or as an anchor when href is set. Set interactive="false" for a passive information row or a row whose nested control owns the interaction; passive items render as div elements without button, link, focus, state-layer, or press behavior. Any href is ignored while the item is passive.

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="item"][data-part="root"] left_clickLMBCopy
<Icon>	leadingconditional	[data-scope="item"][data-part="leading"] left_clickLMBCopy
<span>	main	[data-scope="item"][data-part="main"] left_clickLMBCopy
<span>	headerconditional	[data-scope="item"][data-part="header"] left_clickLMBCopy
<span>	titleconditional	[data-scope="item"][data-part="title"] left_clickLMBCopy
<span>	descriptionconditional	[data-scope="item"][data-part="description"] left_clickLMBCopy
<span>	footerconditional	[data-scope="item"][data-part="footer"] left_clickLMBCopy
<Icon>	trailingconditional	[data-scope="item"][data-part="trailing"] left_clickLMBCopy

Props

Name	Description	Default	Control
shapeOptional	The shape of the button. roundedsquare	undefined	checkroundedsquare
hrefOptional	The href attribute. If provided, the button will be rendered as an anchor element. string | undefined	undefined
leadingIconOptional	Name of the leading icon. string | undefined	undefined
trailingIconOptional	Name of the trailing icon. string | undefined	undefined
disabledOptional	Whether the button is disabled. boolean | undefined	undefined
interactiveOptional	Whether the whole item is an interactive action or link. boolean | undefined	true	check
activeOptional	Highlight the item as active/selected. boolean | undefined	false
titleOptional	Fallback title when default slot is not provided. string | undefined	undefined
descriptionOptional	Fallback description when description slot is not provided. string | undefined	undefined

Events0

No events documented.

Slots6

Name	Parameters	Description
header	-	Optional content above the main row.
leading	-	Optional leading content.
default	-	Main title content.
description	-	Optional description below the title.
trailing	-	Optional trailing content.
footer	-	Optional content below the main row.

Styling20

Preview

Token	Description
--md-item-active-icon-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls active icon color.
--md-item-active-indicator-colorColor Fallbackvar(--md-sys-color-secondary-container)	Controls active indicator color.
--md-item-active-label-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls active label color.
--md-item-active-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls active state layer color.
--md-item-content-gapLayout Fallback--dp(2)	Controls content gap.
--md-item-footer-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls footer color.
--md-item-gapLayout Fallback--dp(12)	Controls gap.
--md-item-header-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls header color.
--md-item-icon-sizeLayout Fallback--dp(20)	Controls icon size.
--md-item-inactive-icon-colorColor Fallbackvar(--md-color-on-container)	Controls inactive icon color.
--md-item-inactive-label-colorColor Fallbackvar(--md-color-on-container)	Controls inactive label color.
--md-item-inactive-state-layer-colorState Fallbackvar(--md-color-on-container)	Controls inactive state layer color.
--md-item-indicator-collapsed-visual-widthLayout Fallback--dp(12)	Controls indicator collapsed visual width.
--md-item-indicator-shapeShape Fallbackvar(--md-shape-indicator)	Controls indicator shape.
--md-item-main-padding-blockLayout Fallback--dp(8)	Controls main padding block.
--md-item-main-padding-inlineLayout Fallback--dp(12)	Controls main padding inline.
--md-item-min-heightLayout Fallback--dp(56)	Controls min height.
--md-item-motionMotion Fallbackvar(--md-easing-spatial)	Controls motion.
--md-item-padding-blockLayout Fallback--dp(8)	Controls padding block.
--md-item-padding-inlineLayout Fallback--dp(8)	Controls padding inline.

ListItem automatically participates in the List Grouping CSS utility, which can also group other elements and components.

Examples

Default

Compositions

M3 Library Overview Open the Button docs page.→

Vue Router

When ListItem is acting as navigation, use RouterLink custom and feed its href and navigate into the component.

person Profile Manage your account details.chevron_rightshield Security Passwords, passkeys, and sign-in alerts.chevron_right

Current route: /account/profile