Biofarma | Bind UI

Button

Buttons enable users to take actions or navigate to different pages. They come in various styles to suit different needs and are particularly effective for drawing attention to the actions users need to take in order to progress in a workflow.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Usage

import id.co.biofarma.binduiandroid.components.button.Button

Button(
    text = "Button",
    type = "solid",
    variant = "primary",
    size = "md",
    radius = "xs",
    disabled = false,
    onClick = { println("Button clicked!") },
    loading = false,
    icon = Icons.Filled.Add
)

Examples

Variants

Use the variants primary, secondary, or danger to change color style of the Button.

Type

Use the type solid, outline, subtle, ghost, or link to change the visual style of the Button.

Size

Use the size xs, sm, md, or lg to change the size of the Button.

Loading

Enable the isLoading to set button become loading state. And can set loadingPosition to left or right loading.

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the button.
text	true	-	`string`	The text in the button.
type	false	`solid`	`solid`, `subtle`, `outline`, `ghost`, `link`	The visual style type of the button.
variant	false	`primary`	`primary`, `secondary`, `danger`	The visual style variant of the button.
size	true	`md`	`xs`, `sm`, `md`, `lg`	The size of the button
radius	true	`xs`	`none`, `xs`, `sm`, `md`, `lg`, `full`	Corner radius of the button
style	false	-	`Modifier`	Custom styles for the button component.
icon	false	-	`ImageVector?`	Provide for Icon Button (Icon Only)
startIcon	false	-	`ImageVector?`	If added, the button will show an icon before the button’s label
endIcon	false	-	`ImageVector?`	If added, the button will show an icon after the button’s label.
disabled	false	`false`	`true`, `false`	If true, button will be set to be disabled state
onClick	false	-	`() -> Unit`	Callback function to run when the button is clicked.
loading	false	`false`	`true`, `false`	If true, the button will be set to be loading state
loadingPosition	false	`start`	`start`, `end`	It determines the position of the spinner when `isLoading` is true (`start` or `end`)
labelLoading	false	`"Loading"`	`string`	The button label when it is loading.

Bottom Sheet Divider