# Badges on card

> Default, secondary, and destructive badges shown together on a card surface.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/badge-on-card).

- Page, with a live preview: https://shadcn.exchange/r/quill/badge-on-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/badge-on-card-light-dc37f9ea6f0620ef.png
- Registry item: https://www.quilldesignsystem.com/r/badge-on-card.json
- Categories: data-display
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/badge-on-card.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `badge`

## Notes from the registry

Default, secondary, and destructive badges shown together on a card surface. Do: Reserve the destructive variant for a status that actually needs attention (blocked, failed, overdue). Don't: Use destructive styling for emphasis on a badge that isn't actually a warning. Use tone-badge when you need a badge whose color is driven by a semantic tone token rather than the three fixed variants here. Use data-table when the badges are actually per-row status in a list of records, not a single card's labels.

## Files

### `registry/blocks/badge-on-card.tsx`

```tsx
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

/** Default, secondary, and destructive badges shown together on a card surface. */
export function BadgeOnCard() {
  return (
    <Card className="w-[280px]">
      <CardContent className="flex gap-2">
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
      </CardContent>
    </Card>
  )
}
```