Pill Design Audit¶
Status: RESOLVED - All pill designs standardized to rounded-md (6px) per updated brand guidelines.
Only buttons and circular icons retain rounded-full.
Audit of all pill-shaped design patterns used across text fields, form inputs, badges, tags, and other UI elements.
Category 1: Text Inputs & Form Fields with Pill Shape¶
Actual form <input> / <select> elements styled as pills.
| # | File | Line | Element | Class | Purpose |
|---|---|---|---|---|---|
| 1 | resources/views/default/panel/user/openai/components/generator_video.blade.php |
345 | <input type="text"> |
rounded-pill (Bootstrap) |
Multi-prompt title/description input for video generator |
| 2 | resources/views/default/panel/admin/users/index.blade.php |
127 | <x-forms.input> |
rounded-full |
Admin users search bar |
| 3 | resources/views/default/panel/admin/market/components/marketplace-filter.blade.php |
7 | <x-forms.input> |
rounded-full |
Marketplace add-on search |
| 4 | resources/views/default/panel/admin/marketplace/components/marketplace-filter.blade.php |
7 | <x-forms.input> |
rounded-full |
Marketplace add-on search |
| 5 | resources/views/default/panel/user/openai_chat/components/prompt_library_modal.blade.php |
242 | <x-forms.input> |
rounded-full |
Prompt library search |
| 6 | resources/views/default/panel/user/openai_chat/components/chat_category_dropdown.blade.php |
65 | <x-forms.input> |
rounded-full |
Chatbot category search |
| 7 | resources/views/vendor/langs/includes/tools.blade.php |
30 | <input type="text"> |
rounded-full |
Translation search |
| 8 | resources/views/vendor/langs/includes/tools.blade.php |
41 | <select> |
rounded-full |
New language dropdown |
| 9 | resources/views/vendor/langs/includes/tools.blade.php |
61 | <select> |
rounded-full |
Default language dropdown |
| 10 | resources/views/livewire/user/roi-calculator.blade.php |
199 | <input type="range"> |
rounded-full |
Win rate slider track |
| 11 | resources/views/livewire/admin/roi-tco-calculator.blade.php |
216 | <input type="range"> |
rounded-full |
Win rate slider track |
Notes:
- Item #1 uses Bootstrap's rounded-pill while all others use Tailwind's rounded-full -- this is inconsistent.
- Items #10-11 use rounded-full for range slider track styling, not for pill-shaped input appearance.
Category 2: Form Component Definitions (size="2xl" = pill)¶
These core form components define a 2xl size that maps to rounded-full px-8 h-16. No pages currently use size="2xl", but the infrastructure exists.
| # | Component File | Line | Definition |
|---|---|---|---|
| 1 | resources/views/default/components/form/text.blade.php |
13 | '2xl' => 'lqd-input-2xl h-16 rounded-full px-8' |
| 2 | resources/views/default/components/form/password.blade.php |
12 | '2xl' => 'lqd-input-2xl h-16 rounded-full px-8' |
| 3 | resources/views/default/components/form/stepper.blade.php |
13 | '2xl' => 'lqd-input-2xl h-16 rounded-full px-8' |
| 4 | resources/views/default/components/form/color.blade.php |
12 | '2xl' => 'lqd-input-2xl h-16 rounded-full px-8' |
Full size progression in these components:
- none → rounded-lg
- sm → rounded-md (h-9)
- md → rounded-lg (h-10)
- lg → rounded-xl (h-11) ← default
- xl → rounded-2xl (h-14)
- 2xl → rounded-full (h-16)
Category 3: Badge / Status Pill Components¶
Core Badge Component¶
File: resources/views/default/components/badge.blade.php
The x-badge component does not use pill shapes. It uses:
- xs / sm → rounded
- md / lg → rounded-md
Ad-hoc Pill Badges in Extensions¶
These files create pill-shaped status badges inline using rounded-full instead of using the x-badge component:
| # | File | Line(s) | Purpose |
|---|---|---|---|
| 1 | app/CustomExtensions/CloudMarketplace/.../admin/index.blade.php |
79, 84, 105, 125 | Enabled/Disabled/Coming Soon status for AWS, Azure, GCP |
| 2 | app/CustomExtensions/CloudMarketplace/.../listings/index.blade.php |
121 | Dynamic listing status badge |
| 3 | app/CustomExtensions/CloudMarketplace/.../wizard/step1.blade.php |
147 | "Auto-generated" tiny label |
| 4 | app/Extensions/AiPresentation/.../recent-presentation-grid-v2.blade.php |
47, 52, 56, 63 | Presentation status (warning/error/neutral/info) |
| 5 | app/Extensions/AiPresentation/.../tier-selector.blade.php |
27 | Plan tier label |
| 6 | app/Extensions/ContentManager/.../admin/tags/index.blade.php |
341 | Tag display badge |
| 7 | app/Extensions/SEOTool/.../index.blade.php |
246, 259 | Keyword match pill buttons |
| 8 | app/Extensions/OnboardingPro/.../getting-started.blade.php |
— | Achievement level badge |
| 9 | resources/views/components/output-asset-card.blade.php |
60 | Asset status (published/scheduled/pending) |
| 10 | resources/views/components/output-relationship-panel.blade.php |
54 | Asset type summary counts |
| 11 | resources/views/components/journey-visualize-button.blade.php |
291 | Journey progress indicator |
Category 4: Tag / Content-Tag Components¶
| # | Component File | Border Radius | Notes |
|---|---|---|---|
| 1 | resources/views/default/components/content-tags/tag-badge.blade.php |
rounded (xs/sm), rounded-md (md/lg) |
Color dots inside use rounded-full |
| 2 | resources/views/default/components/content-tags/tag-list.blade.php |
rounded |
"More tags" overflow count |
| 3 | resources/views/default/components/content-tags/tag-input.blade.php |
rounded-lg |
Tag selection input |
| 4 | resources/views/default/components/content-tags/tag-filter.blade.php |
rounded-full (count only) |
Filter count badge is pill-shaped |
| 5 | resources/views/default/components/content-tags/ai-confidence.blade.php |
rounded-full |
Progress bar segments |
Category 5: Circular / FAB Buttons & Decorative Elements¶
| # | File | Element | Class | Purpose |
|---|---|---|---|---|
| 1 | resources/views/default/components/floating-menu.blade.php |
<button> |
size-14 rounded-full |
Floating action button |
| 2 | resources/views/default/components/bottom-menu.blade.php |
<button> |
rounded-full |
Mobile nav icon buttons |
| 3 | resources/views/default/components/form-step.blade.php |
<span> |
rounded-full size-6 |
Step number indicator |
| 4 | app/Extensions/ChatShare/.../index.blade.php |
<div> |
rounded-full |
Typing indicator |
| 5 | app/CustomExtensions/CloudMarketplace/.../admin/index.blade.php |
<span> |
size-10 rounded-full |
Icon circle containers |
| 6 | app/CustomExtensions/CloudMarketplace/.../connections/index.blade.php |
<div> |
size-10 rounded-full |
Success icon circle |
Key Findings¶
1. Inconsistent pill class usage¶
One file uses Bootstrap's rounded-pill (generator_video.blade.php:345) while the rest of the codebase uses Tailwind's rounded-full. This should be standardized.
2. Search inputs are consistently pill-shaped¶
All 6 search bar inputs use rounded-full bg-foreground/10, forming a deliberate and consistent pattern.
3. Core badge component is NOT pill-shaped¶
The x-badge component uses rounded / rounded-md, but 11+ locations in extensions create their own inline rounded-full pill badges instead of using x-badge. This creates visual inconsistency.
4. Tag badges follow the core badge pattern¶
The tag-badge component uses rounded / rounded-md, consistent with x-badge but different from the ad-hoc extension badges.
5. Unused 2xl pill size in form components¶
All four core form input components (text, password, stepper, color) define size="2xl" → rounded-full, but no page in the codebase actually uses this size.
6. Extension sprawl¶
Most ad-hoc rounded-full badge usage is in extensions (CloudMarketplace, AiPresentation, ContentManager, SEOTool, OnboardingPro) where developers created inline pills instead of using the centralized x-badge component.
Recommendations¶
- Standardize the Bootstrap
rounded-pillingenerator_video.blade.phpto Tailwindrounded-fullfor consistency. - Consider adding a pill variant to
x-badge(e.g.,rounded="full") so extension developers use the component instead of inline markup. - Evaluate whether
size="2xl"should be removed from form components since it's unused, or document when it should be used. - Refactor ad-hoc extension pills to use the
x-badgecomponent with the new pill variant.