Polished, pill-shaped badges for listing product features, benefits, or specs with maximum readability. This set mixes vivid “primary” pills and subtle neutral chips to create clear visual hierarchy for must-have versus optional items. Rounded corners, generous padding, and balanced typography make the pills scannable in dense lists and on small screens. Built with responsive behavior so groups wrap cleanly from desktop to mobile. Color tokens and type scales plug into any design system in seconds. Ideal for landing pages, pricing tables, onboarding, and in-app settings where clarity and consistency matter.

Functionality

• Filled & neutral pill variants with configurable colors and typography

• Adjustable radius, spacing, and padding for compact or roomy layouts

• Grouped chips with auto-wrap and alignment controls (left/center/right)

• Optional icons, counters, or status dots per pill

• Click/tap actions for filters, anchors, or modal details

• Accessible focus states and ARIA labels; high-contrast friendly

Use cases

• Feature lists on marketing and product pages

• “What’s included” sections on pricing/plan comparison tables

• Capability matrices, settings summaries, and onboarding checklists

• Tagging and quick filtering in dashboards or catalogs

• Component spec highlights in design system docs and Figma handoffs

Keywords

feature badges, pill badges, chips, tags, feature list, benefits list, pricing page UI, comparison table, included features, capability matrix, status chip, filled chip, neutral chip, responsive chips, accessible UI, design system component, Flutter widget, FlutterFlow component, web UI, mobile UI, landing page, onboarding checklist, filter tags.