Skip to main content

​
Overview

The Pill component is an interactive button-like element ideal for filters, tags, or selectable options with support for icons, counts, and various states.

​
Basic Usage

import Pill from '@newtonschool/grauity';

function MyComponent() {
  return (
    <Pill 
      onClick={() => console.log('Clicked')}
    >
      Filter Option
    </Pill>
  );
}

​
Props

​
children
React.ReactNode
Label content for the pill.
​
count
number
Optional count to display in the pill.
​
leftIconName
grauityIconName
default:"null"
Icon to display on the left side.
​
rightIconName
grauityIconName
Icon to display on the right side.
​
isActive
boolean
default:false
Highlights the pill in an active state.
​
isDisabled
boolean
default:false
Disables the pill and applies disabled styles.
​
isReadOnly
boolean
default:false
Makes the pill read-only with appropriate styles.
​
size
string
default:"medium"
Size of the pill.Available choices: small, medium, large
​
color
string
default:"brand"
Color theme when the pill is active.Available choices: brand, error, success, warning, yellow, purple
​
onClick
function
Callback function when the pill is clicked.Signature: (event: React.MouseEvent<HTMLButtonElement>) => void
​
ariaLabel
string
Aria label for accessibility.
​
className
string
Additional CSS class name.
​
style
React.CSSProperties
Additional inline styles.

​
Active State

<Pill isActive={true} color="brand">
  Active Filter
</Pill>

<Pill isActive={false}>
  Inactive Filter
</Pill>

​
With Count

<Pill count={5}>
  Category
</Pill>

<Pill isActive={true} count={12} color="brand">
  Selected Items
</Pill>

​
With Icons

<Pill leftIconName="filter">
  Filter
</Pill>

<Pill leftIconName="star" rightIconName="chevron-down">
  Favorites
</Pill>

<Pill isActive={true} leftIconName="check" color="success">
  Completed
</Pill>

​
Sizes

<Pill size="small">Small</Pill>
<Pill size="medium">Medium</Pill>
<Pill size="large">Large</Pill>

​
Colors

<Pill isActive={true} color="brand">Brand</Pill>
<Pill isActive={true} color="success">Success</Pill>
<Pill isActive={true} color="error">Error</Pill>
<Pill isActive={true} color="warning">Warning</Pill>
<Pill isActive={true} color="yellow">Yellow</Pill>
<Pill isActive={true} color="purple">Purple</Pill>

​
Disabled State

<Pill isDisabled={true}>
  Disabled
</Pill>

<Pill isDisabled={true} count={3}>
  Disabled with Count
</Pill>

​
Read-Only State

<Pill isReadOnly={true}>
  Read Only
</Pill>

​
Filter Pills Example

function FilterExample() {
  const [filters, setFilters] = useState({
    active: false,
    pending: false,
    completed: false,
  });

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Pill
        isActive={filters.active}
        onClick={() => setFilters({ ...filters, active: !filters.active })}
        leftIconName="check-circle"
        count={15}
      >
        Active
      </Pill>
      
      <Pill
        isActive={filters.pending}
        onClick={() => setFilters({ ...filters, pending: !filters.pending })}
        leftIconName="clock"
        count={8}
      >
        Pending
      </Pill>
      
      <Pill
        isActive={filters.completed}
        onClick={() => setFilters({ ...filters, completed: !filters.completed })}
        leftIconName="check"
        count={42}
        color="success"
      >
        Completed
      </Pill>
    </div>
  );
}

​
Constants

import { PILL_SIZES_ENUM } from '@newtonschool/grauity';

// Usage
<Pill size={PILL_SIZES_ENUM.MEDIUM} />

Build docs developers (and LLMs) love

Get started for freeTalk to us