# Shadcn UI Badge

> Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.

- Skill: `serverpod/shadcn-ui-badge` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serverpod/shadcn-ui-badge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serverpod/shadcn-ui-badge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: serverpod (https://skillmd.com/u/serverpod)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serverpod/shadcn-ui-badge

---


# Shadcn UI — Badge

## Instructions

`ShadBadge` displays a badge or badge-like component. Variants: default (primary), `ShadBadge.secondary`, `ShadBadge.destructive`, `ShadBadge.outline`.

### Variants

```dart
ShadBadge(child: const Text('Primary'))

ShadBadge.secondary(child: const Text('Secondary'))

ShadBadge.destructive(child: const Text('Destructive'))

ShadBadge.outline(child: const Text('Outline'))
```

Wrap any `child` (typically `Text`) with the desired constructor.