Pill

A flexible badge component designed for a variety of use cases.

Installation

npx love-ui@latest add pill

Usage

import { Pill, PillAvatar, PillButton, PillStatus, PillIndicator, PillDelta, PillIcon, PillAvatarGroup } from "@/components/pill"

<Pill>
  <PillAvatar src="/avatar.jpg" fallback="JD" />
  John Doe
  <PillButton onClick={() => console.log("Remove")}>×</PillButton>
</Pill>

Features

Customizable badge-like component with rounded corners and consistent padding
Support for avatars with fallback options
Built-in status indicators with variants (success, error, warning, info) and pulse animation
Delta indicators for showing changes (increase/decrease)
Icon support with consistent styling
Avatar groups with overlapping effect
Ghost button integration
Themeable variants

Examples

Avatar

A simple pill with an avatar and text.

CL@loveconnor

"use client";

import { Pill, PillAvatar } from "../../../../../packages/pill";

const Example = () => (
  <Pill>
    <PillAvatar
      fallback="CL"
      src="https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg"
    />
    @loveconnor
  </Pill>
);

export default Example;

Status

A pill with a status indicator and text.

Passed

Approval Status

"use client";

import { Pill, PillStatus } from "../../../../../packages/pill";
import { CheckCircleIcon } from "lucide-react";

const Example = () => (
  <Pill>
    <PillStatus>
      <CheckCircleIcon className="text-emerald-500" size={12} />
      Passed
    </PillStatus>
    Approval Status
  </Pill>
);

export default Example;

Button

A pill with a button for dismissal.

#loveui

"use client";

import { Pill, PillButton } from "../../../../../packages/pill";
import { XIcon } from "lucide-react";

const Example = () => (
  <Pill>
    #loveui
    <PillButton size="icon" variant="ghost">
      <XIcon size={12} />
    </PillButton>
  </Pill>
);

export default Example;

Indicator

Pills with different indicator states.

ActiveError

"use client";

import { Pill, PillIndicator } from "../../../../../packages/pill";

const Example = () => (
  <>
    <Pill>
      <PillIndicator pulse variant="success" />
      Active
    </Pill>
    <Pill>
      <PillIndicator variant="error" />
      Error
    </Pill>
  </>
);

export default Example;

Delta

Pills showing different delta states.

Up 10%Down 5%No change

"use client";

import { Pill, PillDelta } from "../../../../../packages/pill";

const Example = () => (
  <>
    <Pill>
      <PillDelta delta={10} />
      Up 10%
    </Pill>
    <Pill>
      <PillDelta delta={-5} />
      Down 5%
    </Pill>
    <Pill>
      <PillDelta delta={0} />
      No change
    </Pill>
  </>
);

export default Example;

Icon

A pill with an icon and text.

17 users

"use client";

import { Pill, PillIcon } from "../../../../../packages/pill";
import { UsersIcon } from "lucide-react";

const Example = () => (
  <Pill>
    <PillIcon icon={UsersIcon} />
    17 users
  </Pill>
);

export default Example;

Avatar Group

A pill with multiple avatars grouped together.

CLSCLR

Loved by millions

"use client";

import { Pill, PillAvatar, PillAvatarGroup } from "../../../../../packages/pill";

const Example = () => (
  <Pill>
    <PillAvatarGroup>
      <PillAvatar
        fallback="CL"
        src="https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg"
      />
      <PillAvatar
        fallback="SC"
        src="https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg"
      />
      <PillAvatar
        fallback="LR"
        src="https://pbs.twimg.com/profile_images/1862717563311968256/xfgt1L9l_400x400.jpg"
      />
    </PillAvatarGroup>
    Loved by millions
  </Pill>
);

export default Example;

Dropzone Rating