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
Web	Web Storybook
Code	Gitlab

Usage

import { Avatar } from 'bio-bind-ui';

<Avatar
  alt='Jhon Doe'
  color='#0098B0'
  colorBadge='#039855'
  id='avatar'
  imageUrl=''
  max={4}
  mode='light'
  size='md'
  username='Jhon Doe'
/>

Examples

Items (optional)

Use items to add content to the accordion.

Size (optional)

Use size to determine the size of the avatar.

Badge (optional)

Use badges to show the status of the avatar

Type (optional)

Type for avatar text, image, icon.

Mode (optional)

Use mode to use dark or light

Props

Props	Required	Default	Type	description
size	false	`md`	`xs`, `sm`, `md`, `lg`, `xl`	The size of avatar component (`xs`, `sm`, `md`, `lg`, `xl`).
showBadge	false	`false`	`boolean`	If true, the badge will be assigned to the avatar.
colorBadge	false	-	`string`	Unique identifier to change the badge color.
imageUrl	false	-	`string`	A unique identifier for changing the image link.
alt	false	-	`string`	Unique identifier for changing alt.
username	false	-	`string`	A unique identifier to change the initials of the name on the avatar.
mode	false	`light`	`light` `dark`	The theme mode of the avatar (`light` or `dark`).
id	false	-	`string`	A unique identifier for the avatar.
color	false	-	`string`	Unique identifier to change the background avatar color.
items	false	-	`AvatarItemProps[]`	A list item that contains the number of avatars for the avatar group.
max	false	-	`number`	Index to determine the max number of avatar.

Appbar Breadcrumbs