Biofarma | Bind UI

AppBar

The AppBar component is a versatile UI element typically used at the top of a screen to display important contextual information and actions. It supports customization for alignment, size, style, mode, and additional elements like navigation icons and trailing components.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

App TitleApp Sub Title

Usage

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

<AppBar
  alignment='left'
  title='App Title'
  subTitle='App Sub Title'
  trailing={
    <>
      {/* @ts-ignore */}
      <Like size={24} />
      {/* @ts-ignore */}
      <ShoppingCart size={24} />
      {/* @ts-ignore */}
      <MoreOne size={24} />
    </>
  }
  navIcon={
    <>
      {/* @ts-ignore */}
      <ArrowLeft size={24} />
      <Avatar mode={mode} size='sm' username='sam s' />
    </>
  }
  mode={'light'}
  variant={'neutral'}
/>

Examples

Mode (optional)

Use mode to use dark or light

App TitleApp Sub Title

Variant (optional)

Use variant rating by using stars or thumb icon.

App TitleApp Sub Title

Props

Props	Required	Default	Type	Description
id	false	`-`	`string`	The unique identifier for the component.
alignment	false	`left`	`left`, `center`	The alignment of the content inside the component.
variant	false	`neutral`	`neutral`,`primary`	The variant style of the component.
style	false	`-`	`CSSProperties`	Custom CSS properties for inline styling.
mode	false	`light`	`light`, `dark`	The theme mode of the component (`light` or `dark`).
title	false	`-`	`string`	The title text to be displayed in the component.
subTitle	false	`-`	`string`	The subtitle text to be displayed under the title.
trailing	false	`-`	`ReactNode`	Element to display on the trailing side of the component.
navIcon	false	`-`	`ReactNode`	Icon element to display for navigation.

Accordion Avatar