Design/net.ikea.skapa.ui.components/Divider

Divider

@Composable
fun Divider()

Divider is a thin grey keyline that help create subsections of content.

Wraps a androidx.compose.material3.HorizontalDivider and androidx.compose.material3.VerticalDivider with the Skapa recommended colour.

Dividers should be used when the interface and information presented would benefit from visual grouping, and never as a decorative element. Only use dividers in contexts where whitespace is not enough to create separation.

See also

Samples

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.Orientation

fun main() { 
   //sampleStart 
   SkapaThemeM3 {
    Column {
        SquareBox {
            Divider(
                modifier = Modifier
                    .padding(all = SkapaSpacing.space100)
                    .align(Alignment.Center),
                orientation = Orientation.Horizontal
            )
        }
        SquareBox {
            Divider(
                modifier = Modifier
                    .padding(all = SkapaSpacing.space100)
                    .align(Alignment.Center),
                orientation = Orientation.Vertical
            )
        }
    }
} 
   //sampleEnd
}
@Composable
fun Divider(modifier: Modifier = Modifier, orientation: Orientation = Orientation.Horizontal)

Divider is a thin grey keyline that help create subsections of content.

Wraps a androidx.compose.material3.HorizontalDivider and androidx.compose.material3.VerticalDivider with the Skapa recommended colour.

Dividers should be used when the interface and information presented would benefit from visual grouping, and never as a decorative element. Only use dividers in contexts where whitespace is not enough to create separation.

Parameters

modifier

Modifier to be applied to the Divider

orientation

Orientation of the Divider

See also

Samples

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.Orientation

fun main() { 
   //sampleStart 
   SkapaThemeM3 {
    Column {
        SquareBox {
            Divider(
                modifier = Modifier
                    .padding(all = SkapaSpacing.space100)
                    .align(Alignment.Center),
                orientation = Orientation.Horizontal
            )
        }
        SquareBox {
            Divider(
                modifier = Modifier
                    .padding(all = SkapaSpacing.space100)
                    .align(Alignment.Center),
                orientation = Orientation.Vertical
            )
        }
    }
} 
   //sampleEnd
}
@Composable
fun Divider(modifier: Modifier = Modifier)

Deprecated

Use Divider function with orientation parameter. Make sure to remove the old Modifier options if you were modifying the height. The new function has been updated to wrap Material3 divider. Note that the rendering has been updated in Material3.

Replace with

Divider(modifier, net.ikea.skapa.ui.Orientation.Horizontal)
Content copied to clipboard