Biofarma | Bind UI

Avatar

Avatars are a visual way to represent a person or business in a user interface. Using avatars encourages empathy and builds trust between recipients, merchants, and consumers.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Usage

import id.co.biofarma.binduiandroid.components.avatar.Avatar

Avatar(
    type = "text",
    variant = "default",
    text = "John Doe",
    size = "md",
    mode = "light",
    badgeStatus = null,
    showBadge = false
)

Examples

Size (optional)

Use size xs, sm, md, lg, xl, or 2xl to determine the size of the avatar.

Badge (optional)

Use showBadges true to show the badge status of the avatar

Type (optional)

Type for avatar text, avatar image, or avatar icon to use avatar type.

Mode (optional)

Use mode to use dark or light.

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the avatar.
variant	false	`default`	`default` , `info` , `success` , `warning` , `danger`	Unique identifier for avatar with a specific color.
size	false	`md`	`xs`, `sm`, `md`, `lg`, `xl` , `2xl`	The size of avatar component (`xs`, `sm`, `md`, `lg`, `xl`, `2xl`).
mode	false	`light`	`light` `dark`	The theme mode of the avatar (`light` or `dark`).
style	false	-	`Modifier`	Custom styles for the avatar component.
text	false	-	`string`	A unique identifier to change the initials of the name on the avatar.
imageUrl	false	-	`string`	A unique identifier for changing the image link.
icon	false	-	`@Composable (() -> Unit)? = null`	Unique identifier to change the icon avatar.
type	false	`text`	`text` , `image` , `icon`	Unique identifier for avatar with a specific type of avatar.
showBadge	false	`false`	`boolean`	If true, badge will be set to showing badge.
badgeStatus	false	`online`	`online` , `offline` , `busy` , `idle` , `working`	Unique identifier for avatar with a specific badge status.

App Bar Bottom Navigation