Badge

The Badge component provides a Windows 98-style badge for displaying small pieces of information, such as notifications or status indicators.

Import

import { Badge } from 'rohit-ui';

Examples

Basic Badge

// Basic badge
<Badge count={5}>
  <button>Notifications</button>
</Badge>

Badge with Custom Position

// Badge with custom color
<Badge 
  count={3}
  color="#ff0000"
>
  <button>Messages</button>
</Badge>

Rohit Mode Badge

∞

// Rohit Mode badge
<Badge 
  count={99}
  rohitMode
>
  <button>Dramatic Notifications</button>
</Badge>

Note: In Rohit Mode, the badge will wiggle, change color, and sometimes randomly reposition itself.

Props

Name	Type	Default	Description
content	string \| number	-	Content to display in the badge
position	'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'	'top-right'	Position of the badge relative to its children
max	number	99	Maximum value to display before showing max+
showZero	boolean	false	Whether to show the badge when content is 0
children	ReactNode	-	Element that the badge is attached to
className	string	-	CSS class to apply to the badge
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Badge component using styled-components:

import styled from 'styled-components';
import { Badge } from 'rohit-ui';

const CustomBadge = styled(Badge)`
  background: purple;
  color: white;
  .badge-content {
    font-family: 'Comic Sans MS', sans-serif;
  }
`;

function MyComponent() {
  return (
    <CustomBadge content="5">
      <button>Custom Badge</button>
    </CustomBadge>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Badge component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reposition itself
Draw unnecessary attention to itself