Badge

Usage

import { Badge } from '@accelint/design-toolkit';

export function MyComponent() {
  return <Badge>New</Badge>;
}

Reference

interface BadgeProps extends ComponentPropsWithRef<'span'> {
  children?: string | number | boolean | null;
  color?: 'info' | 'advisory' | 'normal' | 'serious' | 'critical';
  offset?: number | { x?: number; y?: number };
  placement?: Axis | 'top left' | 'top right' | 'bottom left' | 'bottom right';
}

Props

Prop	Type	Default	Required
`children`	`string \| number \| boolean \| null`	-	No
`color`	`'info' \| 'advisory' \| 'normal' \| 'serious' \| 'critical'`	`'info'`	No
`placement`	`Axis \| 'top left' \| 'top right' \| 'bottom left' \| 'bottom right'`	-	No
`offset`	`number \| { x?: number; y?: number }`	-	No
`className`	`string`	-	No

`color`

Semantic color variant:

info - Informational status (default)
advisory - Advisory or warning status
normal - Normal/success status
serious - Serious warnings
critical - Critical errors or alerts

`placement`

Position relative to container. Useful for notification badges on avatars or icons:

'top left' - Top-left corner
'top right' - Top-right corner
'bottom left' - Bottom-left corner
'bottom right' - Bottom-right corner
'top' or 'bottom' - Centered on top/bottom edge

`offset`

Fine-tune positioning when using placement:

Number: Applies same offset to both x and y axes
Object: Separate x and y offset values

Dot indicator

When children is empty or omitted, Badge renders as a small dot indicator without text.

Examples

Example: Basic badge

import { Badge } from '@accelint/design-toolkit';

<Badge>New</Badge>

Example: Color variants

import { Badge } from '@accelint/design-toolkit';

<>
  <Badge color="info">Info</Badge>
  <Badge color="advisory">Advisory</Badge>
  <Badge color="normal">Success</Badge>
  <Badge color="serious">Warning</Badge>
  <Badge color="critical">Error</Badge>
</>

Example: Numeric badge

import { Badge } from '@accelint/design-toolkit';

<Badge color="critical">5</Badge>

Example: Dot indicator

import { Badge } from '@accelint/design-toolkit';

<Badge color="normal" />

Example: Positioned notification badge

import { Badge, Avatar } from '@accelint/design-toolkit';

<div style={{ position: 'relative' }}>
  <Avatar src="/avatar.jpg" />
  <Badge 
    placement="top right" 
    offset={4}
    color="critical"
  >
    3
  </Badge>
</div>

Example: Badge with custom offset

import { Badge } from '@accelint/design-toolkit';

<Badge 
  placement="top right"
  offset={{ x: 8, y: -4 }}
  color="advisory"
>
  12
</Badge>

Good to know: When using positioned badges, ensure the parent container has position: relative for correct positioning.

Avatar - Avatar component often used with badges
Icon - Icon component for badge-like indicators
Chip - Larger tag/chip component for labels

Badge

On this page