Pill Component
Pill Component
A simple pill-shaped component for tags, labels, or decorative elements.
Quick Example
JavaScript TypeScript React Astro Read Only
JavaScript
TypeScript
React
Astro
Read Only Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The text content to display |
| class | string | '' | Additional CSS classes |
| interactive | boolean | true | Whether the pill has hover effects |
Interactive States
Interactive Pills (Default)
These pills have hover effects and change appearance on interaction.
Hover me Interactive Clickable
Hover me
Interactive
Clickable Non-Interactive Pills
These pills are static and don't respond to hover or interaction.
Static Read Only Display Only
Static
Read Only
Display Only Custom Styling
Size Variations
Small Default Large
Small
Default
Large Color Variations
Blue Green Red Purple
Blue
Green
Red
Purple Opacity Variations
Full Opacity 75% Opacity 50% Opacity 25% Opacity
Full Opacity
75% Opacity
50% Opacity
25% Opacity Common Use Cases
Technology Stack
Display technologies used in a project.
React TypeScript Tailwind CSS Astro Node.js
Skills & Expertise
Showcase skills or areas of expertise.
Frontend Development UI/UX Design API Development Database Design
Categories & Tags
Categorize content or add tags.
Web Development Tutorial Best Practices Advanced
Usage Examples
Interactive Pill
JavaScript Non-Interactive Pill
Read Only Custom Styled Pill
Custom In a List
Dynamic pill generation from array:
- • Maps over technology array
- • Creates pill for each item
- • Uses consistent styling
- • Non-interactive for display
Import
import Pill from '../ui/atoms/Pill.astro';