Biofarma | Bind UI

Badge

Badges are used to indicate the status of an item for quick recognition.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Badge Preview

Usage

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

  import id.co.biofarma.binduiandroid.components.badge.Badge

    Badge(
        label="Badge Label",
        type="solid",
        variant="default",
        size="sm",
        radius="none",
        icon={}
    )

Examples

Variant

Set the variant prop to default, info, success, warning or danger for different color.

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the badge.
label	true	-	`string`	Label text on badge.
variant	false	`default`	`default`, `info` `success` `warning` `danger`	The visual color variant of the badge.
type	false	`solid`	`solid` `subtle` `outline`	The visual style of the badge.
size	false	`sm`	`sm` `lg`	The size of the badge.
radius	false	`none`	`none` `xs` `sm` `md` `lg` `full`	Corner radius of the badge.
showIcon	false	`false`	`true` `false`	If true, the icon will appear
icon	false	-	`Composeable`	A composable function that describes the icon on the left side of the badge.
style	false	-	`modifier`	To decorate or add behavior to Compose UI elements

Popover Bottom Sheet