ListItem

ListItem is a Button extension with richer content layout, suitable for interactive list entries and action rows.

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
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.

Examples

Default

List

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