shadcn_ui-badge

Original：🇺🇸 English

Translated

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

2installs

Sourceserverpod/skills-registry

Added on2026-04-21

NPX Install

npx skill4agent add serverpod/skills-registry shadcn_ui-badge

SKILL.md Content

View Translation Comparison →

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.