icon-button — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited icon-button (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.
A button optimized for icon-only actions. Wraps the Button component with square padding and removes fullWidth, start, and end props.
import { IconButton } from 'reablocks';Inherits all Button props except fullWidth, start, and end:
| Prop | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
color | `'default' \ | 'primary' \ | 'secondary' \ | 'destructive' \ | string` | 'default' | Color variation |
variant | `'filled' \ | 'outline' \ | 'text' \ | 'ghost' \ | string` | 'filled' | Style variant |
size | `'small' \ | 'medium' \ | 'large' \ | string` | 'medium' | Size variation | |
disabled | boolean | false | Disable the button | ||||
animated | boolean | true | Enable press animation | ||||
theme | ButtonTheme | — | Per-instance theme override | ||||
className | string | — | Additional CSS classes | ||||
children | ReactNode | — | Icon element |
<IconButton color="primary">
<SearchIcon />
</IconButton><IconButton variant="filled"><Icon /></IconButton>
<IconButton variant="outline"><Icon /></IconButton>
<IconButton variant="text"><Icon /></IconButton>
<IconButton variant="ghost"><Icon /></IconButton><IconButton color="primary" variant="filled"><Icon /></IconButton>
<IconButton color="secondary" variant="filled"><Icon /></IconButton>
<IconButton color="destructive" variant="filled"><Icon /></IconButton>
<IconButton color="primary" variant="outline"><Icon /></IconButton>
<IconButton color="primary" variant="text"><Icon /></IconButton>
<IconButton color="primary" variant="ghost"><Icon /></IconButton>Icon padding per size: small = px-2 py-1, medium = px-4 py-2, large = px-5 py-2.5:
<IconButton size="small"><Icon /></IconButton>
<IconButton size="medium"><Icon /></IconButton>
<IconButton size="large"><Icon /></IconButton><IconButton disabled variant="filled"><Icon /></IconButton>
<IconButton disabled variant="outline"><Icon /></IconButton>Uses the Button theme. Icon-specific padding is applied from theme.iconSizes[size]:
// Default iconSizes in ButtonTheme
iconSizes: {
small: 'px-2 py-1',
medium: 'px-4 py-2',
large: 'px-5 py-2.5'
}~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.