Mobi Lab Components for Compose

Mobi Lab Components for Compose (LabComponentsCompose) help developers execute our internal design system's components on the Android platform.

Maven Central artifact available from https://central.sonatype.com/search?q=mobi.lab.labcomponents:labcomponents-compose

implementation 'mobi.lab.labcomponents:labcomponents-compose:0.0.8'

The components provide implementations for Mobi Lab's design system. These components are based on Material Components for Android.

Compatible versions

Lab Components for Compose version	Compose BOM version used	CompileSdk used
0.0.8	2025.05.00	API 36 / Android 16
0.0.7	2025.05.00	API 36 / Android 16
0.0.6	2025.05.00	API 36 / Android 16
0.0.5	2025.05.00	API 36 / Android 16
0.0.4	2025.04.01	API 36 / Android 16
0.0.3	2025.04.01	API 36 / Android 16
0.0.2	2025.04.01	API 36 / Android 16
0.0.1	2025.04.01	API 36 / Android 16

Description

The library contains a ready-to-use Compose implementation of the components from Mobi Lab's design system. Mobi Lab's design system allows teams to focus on solving business problems instead of reinventing basic design system and UI components at the design and implementation phases.

The project consists of the component library in lib module and the components demo application in app-demo module.

Buttons

Filled button

// Medium
LabFilledButton(
    text = "Click Me!",
    onClick = {},
    enabled = enabled.value
)

// Small
LabFilledSmallButton(
    text = "Click Me!",
    onClick = {},
)

Toned button

// Medium
LabTonedButton(
    text = "Click Me!",
    onClick = {},
)

// Small
LabTonedSmallButton(
    text = "Click Me!",
    onClick = {},
)

Outlined button

// Medium
LabOutlinedButton(
    text = "Click Me!",
    onClick = {},
)

// Small
LabOutlinedSmallButton(
    text = text = "Click Me!",
    onClick = {},
)

Text button

// Medium
LabTextButton(
    text = "Click Me!",
    onClick = {},
)

// Small
LabTextSmallButton(
    text = "Click Me!",
    onClick = {},
)

Icon button

// Medium
LabIconButton(
    icon = ImageSource.vector(Icons.Filled.FavoriteBorder),
    contentDescription = "Like",
    onClick = {},
)

// Small
LabIconSmallButton(
    icon = ImageSource.vector(Icons.Filled.FavoriteBorder),
    contentDescription = "Like",
    onClick = {},
)

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/blob/main/app-demo/src/main/java/mobi/lab/components/compose/demo/button/ButtonDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=1972-21984&m=dev

Colors

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/blob/main/app-demo/src/main/java/mobi/lab/components/compose/demo/color/ColorsDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=1972-22024&m=dev

Text fields

Text field with a label

var text1: String by rememberSaveable { mutableStateOf("Input") }
LabTextField(
    modifier = Modifier.fillMaxWidth(),
    value = text1,
    label = "Label",
    onValueChange = { text1 = it },
    enabled = enabled.value,
    supportingText = "Supporting text",
    errorValue = "",
    errorReserveSpace = true,
    singleLine = true,
)

Text fields for login via email and password

var text2: String by rememberSaveable { mutableStateOf("") }
LabTextField(
    modifier = Modifier
        .fillMaxWidth()
        .semantics { contentType = ContentType.EmailAddress },
    value = text2,
    onValueChange = { text2 = it },
    label = "Email",
    enabled = enabled.value,
    errorValue = errorText,
    errorReserveSpace = true,
    singleLine = singleLine.value,
)
var text3: String by rememberSaveable { mutableStateOf("") }
var text3ShowPassword by rememberSaveable { mutableStateOf(false) }
LabTextField(
    modifier = Modifier
        .fillMaxWidth()
        .semantics { contentType = ContentType.Password },
    value = text3,
    onValueChange = { text3 = it },
    label = "Password",
    trailingIcon = ImageSource.vector(Icons.Filled.Info),
    trailingIconContentDescription = "Toggle password visibility",
    onTrailingIconClick = { text3ShowPassword = !text3ShowPassword },
    enabled = enabled.value,
    errorValue = errorText,
    errorReserveSpace = true,
    singleLine = singleLine.value,
    visualTransformation = if (text3ShowPassword) {
        VisualTransformation.None
    } else {
        PasswordVisualTransformation()
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/tree/main/app-demo/src/main/java/mobi/lab/components/compose/demo/textfield/TextFieldDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=1971-21101&m=dev

Top app bar

Top app bar with a title only

// Normal (small) one
LabTopAppBar(
    title = "Title",
)

// Large (two-row) one
LabLargeTopAppBar(
    title = "Title",
)

Top app bar with title and up navigation

// Normal (small) one
LabTopAppBar(
    title = "Title",
    navConfig = upNavConfig(),
)

// Large (two-row) one
LabLargeTopAppBar(
    title = "Title",
    navConfig = upNavConfig(),
)

Top app bar with title, up navigation and action items

// Normal (small) one
LabTopAppBar(
    title = "Title",
    navConfig = upNavConfig(),
    actions = {
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Edit),
            contentDescription = "Edit",
            onClick = {},
        )
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Email),
            contentDescription = "Email",
            onClick = {},
        )
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Call),
            contentDescription = "Call",
            onClick = {},
        )
    },
)

// Large (two-row) one
LabLargeTopAppBar(
    title = "Title",
    navConfig = upNavConfig(),
    actions = {
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Edit),
            contentDescription = "Edit",
            onClick = {},
        )
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Email),
            contentDescription = "Email",
            onClick = {},
        )
        LabIconButton(
            icon = ImageSource.vector(Icons.Filled.Call),
            contentDescription = "Call",
            onClick = {},
        )
    },
)

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/blob/main/app-demo/src/main/java/mobi/lab/components/compose/demo/topappbar/TopAppBarDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=3696-13277&m=dev

Typography

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/blob/main/app-demo/src/main/java/mobi/lab/components/compose/demo/typography/TypographyDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=1972-21998&m=dev

Progress indicators

Indeterminate progress

LabIndeterminateCircularIndicator()

Indeterminate progress with a larger size

LabIndeterminateCircularIndicator(modifier = Modifier.size(40.dp))

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/blob/main/app-demo/src/main/java/mobi/lab/components/compose/demo/progress/ProgressDestination.kt
• design at https://www.figma.com/design/gxt4iyWGyliILJSOCLXonl/P42-DDD-design-system-template?node-id=3680-8065&m=dev

Switch

Warning: LabSwitch is not yet fully specified in the design system and will likely change in the future.

val checked = rememberSaveable { mutableStateOf(true) }
LabSwitch(
    checked = checked.value,
    onCheckedChange = { checked.value = !checked.value }
)

See

• usage examples at https://github.com/LabMobi/labcomponents-compose/tree/main/app-demo/src/main/java/mobi/lab/components/compose/demo/switches/SwitchDestination.kt

Links

• Changelog
• Upcoming tasks
• Directory Structure
• Resource Visibility
• Contributing
• Release Guide
• Material Components for Android (external)