Biofarma | Bind UI

Badge

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

BADGE

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

<Badge
  icon=''
  id='badge'
  label='BADGE'
  mode='light'
  radius='md'
  size='small'
  style={{}}
  type='solid'
  variant='information'
/>

Set the variant prop to information , success, warning, danger, or neutral for different color.

BADGE INFORMATION

BADGE SUCCESS

BADGE WARNING

BADGE DANGER

BADGE NEUTRAL

Set the type prop to subtle, solid, or outline for different styles.

BADGE SOLID

BADGE SUBTLE

BADGE OUTLINE

Set the size prop to small or large.

BADGE SMALL

BADGE LARGE

Use mode to use dark or light

BADGE LIGHT MODE

BADGE DARK MODE

Props	Required	Default	Type	description
label	true	-	`string`	The label text for the badge.
style	false	-	`CSSProperties`	Custom styles for the badge component.
mode	false	`light`	`light` `dark`	The theme mode of the badge (`light` or `dark`).
id	false	-	`string`	A unique identifier for the badge.
variant	false	`information`	`information` `success` `warning` `danger` `neutral`	The visual color variant of the badge.
type	false	`solid`	`solid` `subtle` `outline`	The visual style variant of the badge.
size	false	`small`	`small` `large`	The size of Badge.
radius	false	`md`	`none` `xs` `sm` `md` `lg` `full`	Corner radius of the Badge
icon	false	-	`ReactNode`	If added, the badge will show an icon before the badge’s label