badge — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited badge (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Small status indicator or count label positioned relative to its child element. Animated on appearance using Framer Motion.
import { Badge } from 'reablocks';| 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.
<Badge content="3" color="primary">
<NotificationIcon />
</Badge><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><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><Badge content="5" hidden>
<Icon />
</Badge><Badge content="7" color="error" />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;
};
}~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.