Selectable Pill

A pill-shaped button component that can be toggled between selected and unselected states with visual feedback.

Basic usage

Different sizes

Disabled state

Filter/tag example

Installation

Install the following dependencies

Loading...

bash

API Reference

Props list

PropTypeDefaultExampleDescription
selectedbooleanfalsetrueWhether the pill is in the selected state. When selected, the pill uses primary colors with shadow. When unselected, it uses muted colors with hover effects.
size"sm" | "default" | "lg""default"smThe size of the pill. Small uses px-2.5 py-1, default uses px-3 py-1.5, and large uses px-4 py-2.
childrenReactNode-Pill TextThe content to display inside the pill button.
classNamestring-custom-classAdditional CSS classes to apply to the pill element.

Behavior

The component provides visual feedback based on the selected state:

  • When selected is false, the pill uses muted background and text colors with a hover effect that slightly darkens the background.
  • When selected is true, the pill uses primary background and foreground colors with a shadow for emphasis.
  • The component includes smooth transitions between states with a 200ms duration.
  • All standard button props are supported through spread props, allowing full customization of button behavior (onClick, disabled, etc.).
  • The pill shape is achieved using rounded-full, making it ideal for tags, filters, and selection UI patterns.