Pill

Pill renders compact category and status labels.

CoreBasics@gaudi/design-system/core/PillView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Pill from '@gaudi/design-system/core/Pill';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/badge-icons-avatars.json.

import { Pill } from '@gaudi/design-system';
<Pill tone='blue' variant='solid' size='sm'>Engineering</Pill>

Props

children

sizedefault md

tonedefault blue

variantdefault solid

radiusdefault sm

pulse

Pill.jsx

import Pill from '@gaudi/design-system/core/Pill';
<Pill>Badge</Pill>

9 props

Pill includes visible text so status or category meaning is not color-only.