---
title: "HorizontalDivider"
description: "A divider is a thin line that groups content in lists and layouts."
type: "component"
social_image: "/static/images/material3/divider.png"
---

<div class='type'>Composable Component</div>



A divider is a thin line that groups content in lists and layouts.

<img loading='lazy' class='hero-img' alt='Divider image' src='/static/images/material3/divider.png'>

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun HorizontalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
) =
    Canvas(modifier.fillMaxWidth().height(thickness)) {
        drawLine(
            color = color,
            strokeWidth = thickness.toPx(),
            start = Offset(0f, thickness.toPx() / 2),
            end = Offset(size.width, thickness.toPx() / 2),
        )
    }
```


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this divider line. |
| thickness | thickness of this divider line. Using `Dp.Hairline` will produce a single pixel divider regardless of screen density. |
| color | color of this divider line. |