Plinth

Tag

Dismissible chip with optional count, for filters and selections.

DesignEngineeringHealth techRemote

Try dismissing one; the demo is live.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/tag.json

Usage

import { Tag } from "@/components/ui/tag";

<Tag count={4} onDismiss={() => removeFilter(id)}>Health tech</Tag>

Sizes

SmallMediumLarge

Props

PropTypeDefault
sizesm · md · lgmd
countnumber—
onDismiss() => void—

Accessibility

  • The remove control is a real button with aria-label="Remove", so it's keyboard reachable and announced correctly.
  • Dismissal is controlled by you; removing the tag from the DOM after onDismiss keeps focus management predictable if you move focus to the next tag or the list container.

Badge

Status pill with semantic variants, three sizes, and a dot option.

Avatar

Avatar with image loading, auto-initials fallback, five sizes, and grouping.

On this page

InstallUsageSizesPropsAccessibility