Biofarma | Bind UI

Bottom Sheets

Bottom sheet is a slides up from bottom of screen to reveal additional content or actions.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Bottom Sheet Preview

Usage

import id.co.biofarma.binduiandroid.components.bottomsheets.BottomSheet

BottomSheet(
    title = "Title",
    titleAlignment = TitleBottomSheetAlignment.LEFT,
    isVisible = isLeftAligned,
    secondaryButtonLabel = "Cancel",
    primaryButtonLabel = "Save",
    onDismiss = { isLeftAligned = false }
){
repeat(itemCount) {
    Box(
        modifier = Modifier
            .padding(8.dp)
            .height(50.dp)
            .fillMaxWidth(),
        contentAlignment = Alignment.Center
    ) {
        Canvas(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 16.dp)
        ) {
            drawRoundRect(
                color = Color(0xff008AA0),
                size = size,
                style = Stroke(
                    width = 2.dp.toPx(),
                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
                ),
            )
            drawRect(
                color = Color(0xffE6F5F7).copy(alpha = 0.7f),
                size = size
            )
        }
        Text(
            text = "PLACEHOLDER",
            style = Typography.Button.Medium,
            color = Color(0xff34ADC0),
            modifier = Modifier.padding(12.dp)
        )
    }
}
}

Examples

No Title (optional)

Use no title if the bottom sheet does not use a title.

Bottom Sheet Example No Title

No Action Button (optional)

Use no action button if the bottom sheet does not use a action button.

No Title and No Action Button (optional)

Use no title and no action button if the bottom sheet does not use a title and action button.

Props

Props	Required	Default	Type	description
title	false	-	`string`	For set the title of bottom sheet component.
titleAlignment	false	-	`TitleBottomSheetAlignment`	For set the title alignment of bottom sheet component.
isVisible	false	`false`	`boolean`	For toggle controls the visibility of the bottom sheet.
hideCloseIcon	false	`false`	`boolean`	For toggle determines whether the close icon should be hidden.
onDismiss	false	-	`() -> Unit`	Callback function triggered when the bottom sheet is dismissed.
isSystemInDarkTheme	false	`false`	`boolean`	For toggle determines the theme mode for the bottom sheet.
sheetState	false	-	`SheetState`	Custom sheet state for advanced configuration
modifier	false	-	`modifier`	Modifier for additional styling and layout modifications.
scrimColor	false	-	`color`	For color of the scrim (overlay) behind the bottom sheet.
secondaryButtonLabel	false	-	`string`	To set the label for the secondary (left) button.
onSecondaryButtonClick	false	-	`(() -> Unit)?`	Callback for the secondary button click event.
primaryButtonLabel	false	-	`string`	To set the label for the primary (right) button.
onPrimaryButtonClick	false	-	`(() -> Unit)?`	Callback for the primary button click event.
content	false	-	`@Composable ColumnScope.() -> Unit`	For content of the bottom sheet.

Badge Button