<h2 id="listitem-modifier-supportinglabel-leadingicon-trailingicon-shape-color-contentcolor-border-contentpadding-interactionsource-content">ListItem</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
public fun ListItem(
    modifier: Modifier = Modifier,
    supportingLabel: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this list item |
| supportingLabel | optional supporting label to be placed underneath the primary label `content` |
| leadingIcon | optional leading icon to be placed before the primary label `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| trailingIcon | optional trailing icon to be placed after the primary label `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) used to clip this list item, and also used to draw the background and border |
| color | background color of this list item |
| contentColor | content color used by components inside `content`, `supportingLabel`, `leadingIcon`, and `trailingIcon`. |
| border | the border to draw around this list item |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the main content / primary label to display inside this list item |

<hr class="docs-overload-divider">

<h2 id="listitem-onclick-modifier-supportinglabel-leadingicon-trailingicon-shape-color-contentcolor-border-contentpadding-interactionsource-content">ListItem</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
public fun ListItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    supportingLabel: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| onClick | called when this list item is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this list item |
| supportingLabel | optional supporting label to be placed underneath the primary label `content` |
| leadingIcon | optional leading icon to be placed before the primary label `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| trailingIcon | optional trailing icon to be placed after the primary label `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) used to clip this list item, and also used to draw the background and border |
| color | background color of this list item |
| contentColor | content color used by components inside `content`, `supportingLabel`, `leadingIcon`, and `trailingIcon`. |
| border | the border to draw around this list item |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the main content / primary label to display inside this list item |