Pill Block
Add small badge or tag elements to highlight categories, status, or labels in your content.
What is the Pill Block?
A compact, styled text element perfect for:
- Category tags
- Status badges
- Labels and tags
- Feature highlights
- Small call-outs
Key Features
- Multiple preset styles
- Custom colors
- Icon support
- Link capability
- Size variants
- Border and fill options
How to Use
- Insert Pill block
- Enter text content
- Choose style (filled, outlined, ghost)
- Select color or custom color
- Add optional icon
- Add link if needed
Settings
Style Options:
- Filled – Solid background with contrasting text
- Outlined – Border only with transparent background
- Ghost – Subtle background tint
Color Options:
- Theme colors (primary, secondary, etc.)
- Status colors (success, warning, error, info)
- Custom colors
Size Options:
- Small – Compact size
- Medium – Default size
- Large – Prominent size
Additional:
- Icon – Optional icon before text
- Link – Make pill clickable
- Border Radius – Adjust roundness
Common Use Cases
Blog Post Categories
Above post title: Design, Development, Tutorial
Product Status
New, Sale, Limited, Out of Stock
Feature Tags
Premium, Popular, Recommended
Version Numbers
v2.0, Beta, Coming Soon
Best Practices
- Use sparingly for maximum impact
- Keep text short (1-3 words)
- Use consistent colors for same categories
- Group related pills together
- Ensure readability with sufficient contrast
- Consider mobile tap target size if clickable
Color Meanings
- Blue – Information, Primary
- Green – Success, Active, Available
- Yellow – Warning, Pending
- Red – Error, Urgent, Sale
- Gray – Neutral, Inactive