Biofarma | Bind UI

Floating Action Button

The floating action button (FAB) is used to perform the primary or most common action on a screen.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

FAB Preview

Usage

To implement FAB, you can use this tag FloatingActionButton in the Kotlin file.

    import id.co.biofarma.binduiandroid.components.floating_action_button.FloatingActionButton

    FloatingActionButton(
        id = "fab_circle_example",
        extended = false,
        type = "solid",
        variant = "primary",
        size = "md",
        onClick = { },
        icon = Icons.Filled.Add,
        position = "right",
        radius = "md",
        label = "PRIMARY",
        disabled = false
    )

Examples

Variant

Set the variant prop to primary , secondary , danger, or neutral for different color.

FAB Variant

Type

Set the type prop to solid, or subtle for different type.

FAB Type

Extended FAB (optional)

Set the extended prop to true, if you would like to change to Extended FAB.

FAB Extended

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the FAB.
label	false	-	`string`	The Extended FAB label text.
icon	true	-	`imageVector`	FAB icon.
variant	false	`primary`	`primary` , `secondary` , `danger`, `neutral`	The visual color variant of the FAB.
type	false	`solid`	`solid` , `subtle`	The visual style of the FAB.
size	false	`md`	`sm` , `md`, `lg`	The FAB size.
radius	false	`xs`	`none` , `xs`, `sm`, `md`, `lg`, `full`	The Extended FAB corner radius.
position	false	`left`	`left` , `center` , `right`	FAB Position at the bottom screen `left`, `center`, or `right`.
extended	false	`false`	`true` `false`	If true, FAB will be turn to Extended FAB.
disabled	false	`false`	`true` `false`	If true, FAB will be set to disabled state.
onClick	false	-	`() -> Unit = {}`	Callback function to run when the FAB is clicked.
style	false	-	`Modifier`	To decorate or add behavior to Compose UI elements.

Divider Snackbar