Badge
AI Skills for Reaviz Projects
npx -y skills add reaviz/skills --skill badgeAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
2.2 KB, as published. Nobody here has run it
Badge
Small status indicator or count label positioned relative to its child element. Animated on appearance using Framer Motion.
Import
import { Badge } from 'reablocks';
Badge Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | JSX.Element | — | Badge content (text or element) |
color | 'default' | 'primary' | 'secondary' | 'error' | string | 'default' | Color variant |
placement | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-end' | Badge position relative to child |
hidden | boolean | false | Hide the badge |
disableMargins | boolean | false | Remove default margins |
theme | BadgeTheme | — | Per-instance theme override |
className | string | — | Additional CSS classes |
Also accepts all standard HTMLSpanElement attributes.
Basic Usage
<Badge content="3" color="primary">
<NotificationIcon />
</Badge>
Colors
<Badge content="1" color="default"><Icon /></Badge>
<Badge content="2" color="primary"><Icon /></Badge>
<Badge content="3" color="secondary"><Icon /></Badge>
<Badge content="4" color="error"><Icon /></Badge>
Placement
<Badge content="1" placement="top-start"><Icon /></Badge>
<Badge content="2" placement="top-end"><Icon /></Badge>
<Badge content="3" placement="bottom-start"><Icon /></Badge>
<Badge content="4" placement="bottom-end"><Icon /></Badge>
Hidden Badge
<Badge content="5" hidden>
<Icon />
</Badge>
Content-Only Badge (No Children)
<Badge content="7" color="error" />
BadgeTheme Interface
interface BadgeTheme {
base: string; // Container (relative, inline-flex)
disableMargins: string; // No margin override
badge: string; // Badge element (absolute, centered, rounded)
position: string; // Default position transform
colors: {
default: string;
primary: string;
secondary: string;
error: string;
[key: string]: string;
};
positions: {
'top-start': string;
'top-end': string;
'bottom-start': string;
'bottom-end': string;
};
}