Badge

Badge generates a small badge, which can be used to show notification with count or just a dot.

Basic Badge

Example of a badge containing text.

Preview

new

Usage


import { Badge } from 'archi-ui'


<Badge badgeContent='new' />

Variants

The Badge comes with a two variants: standard(default) and dot.

You can use standard variant for displaying count or some content like text, icons, an SVG icon.

The dot prop changes a badge into a small dot. This can be used as a notification that something has changed without using a count.

Preview

99+

Color

Use color prop to apply different colors to component.

Preview

Size

Use size prop to change the size of the badge.

Preview

Badge Visibility

The visibility of badges can be controlled using the invisible prop.

Preview

Show Badge

showZero Prop

The badge hides automatically when badgeContent is zero. You can override this with the showZero prop.

Preview

Maximum Value

You can use the max prop to cap the value of the badge content.

Preview

99+

999+

Badge Alignment

Preview

code


import React from 'react';
import { Badge, Button } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col gap-6">
      <div className='flex flex-wrap items-center justify-center gap-6'>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='secondary'>Bottom right</Button>
          <Badge badgeContent={80} color='warning' className='absolute bottom-0 transform translate-y-1/2 right-0 translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='success'>Top left</Button>
          <Badge badgeContent={50} color='error' className='absolute top-0 transform -translate-y-1/2 left-0 -translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='warning'>Top right</Button>
          <Badge badgeContent={60} color='primary' className='absolute top-0 transform -translate-y-1/2 right-0 translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='primary'>Bottom left</Button>
          <Badge badgeContent={10} color='secondary' className='absolute bottom-0 transform translate-y-1/2 left-0 -translate-x-1/2' />
        </div>
      </div>
      <div className='flex flex-wrap items-center justify-center gap-4'>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='secondary'>Bottom right</Button>
          <Badge variant='dot' color='warning' className='absolute bottom-0 transform translate-y-1/2 right-0 translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='success'>Top left</Button>
          <Badge variant='dot' color='error' className='absolute top-0 transform -translate-y-1/2 left-0 -translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='warning'>Top right</Button>
          <Badge variant='dot' color='primary' className='absolute top-0 transform -translate-y-1/2 right-0 translate-x-1/2' />
        </div>
        <div className="relative inline-flex items-center">
          <Button variant='filled' color='primary'>Bottom left</Button>
          <Badge variant='dot' color='secondary' className='absolute bottom-0 transform translate-y-1/2 left-0 -translate-x-1/2' />
        </div>
      </div>
    </div>
  );
}

Badge API

API reference docs for the React Badge component.

Props

Name	Type	Default	Description
badgeContent	`node`	-	The content rendered within the badge.
className	`string`	-	Override or extend the styles applied to the component.
variant	`'standard' \| 'dot'`	`'standard'`	The variant to use.
size	`'sm' \| 'md' \| 'lg'`	`'sm'`	The size of the badge.
rounded	`'none' \| 'full' \| 'md'`	`'full'`	The border-radius of the component.
color	`'default' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'success' \| 'error'`	`'primary'`	The color of the component.
invisible	`bool`	`false`	If `true`, the badge is invisible.
showZero	`bool`	`false`	Controls wheather the badge is hidden when badgeContent is zero.
max	`number`	`99`	Max count to show.