{% load static %} UI Component Comparison Test

UI Component Comparison Test

Comparing old include method vs new cotton component method for Button, Input, and Card components

Test 1: All Variants (Default Size)

Default Variant
Default Button
Default Button
Destructive Variant
Delete Item
Delete Item
Outline Variant
Outline Button
Outline Button
Secondary Variant
Secondary Button
Secondary Button
Ghost Variant
Ghost Button
Ghost Button
Link Variant
Link Button
Link Button

Test 2: All Sizes (Default Variant)

Default Size
Default Size
Default Size
Small Size
Small Size
Small Size
Large Size
Large Size
Large Size
Icon Size
🔥
🔥

Test 3: HTMX Attributes

hx-get Attribute
Load Content
Load Content
hx-post Attribute
Submit Form
Submit Form

Test 4: Icons

Left Icon
Save
Save
Right Icon
Next
Next

Test 5: Additional Classes and Attributes

Custom Classes
Custom Button
Custom Button
Type Attribute
Submit
Submit
Disabled State
Disabled
Disabled

Test 6: Complex Combinations

Destructive + Large + Icon + HTMX
Delete All
Delete All
Outline + Small + Right Icon + Custom Attributes
Export
Export

Test 7: Legacy Underscore Props vs Modern Hyphenated Attributes

This test verifies backward compatibility - cotton components should accept both legacy underscore props (hx_get, x_data) and modern hyphenated attributes (hx-get, x-data).

Legacy hx_get vs Modern hx-get
Load Content
Load Content
Load Content
Legacy hx_post vs Modern hx-post
Submit Form
Submit Form
Submit Form
Legacy x_data vs Modern x-data
Alpine Button
Alpine Button
Alpine Button
Legacy onclick vs Modern onclick
Click Handler
Click Handler
Legacy type vs Modern type
Submit Form
Submit Form
Legacy disabled vs Modern disabled
Disabled Button
Disabled Button
Complex Legacy Props Combination
Legacy Complex
Legacy Complex
Modern Complex
Alpine.js x_on Special Case
Alpine Click
Alpine Click
Alpine Click

Test 8: Input Component Comparison

Basic Text Input
Email Input with Value
Password Input
Number Input with Min/Max
Disabled Input
Readonly Input
Input with Custom Class
Input with HTMX Attributes
Input with Alpine.js

Test 8: Card Component Comparison

Basic Card with Title
This is a simple card with just a title and content.
Card with Title and Description
Here is the main content of the card.
Card with Custom Header Content
This card has custom header content instead of a simple title.
Card with Body Content (instead of slot)
Card with Footer
This card has footer content at the bottom.
Complete Card (All Sections)
Main content goes here. This is the primary content area.
Card with Custom Classes
This card has custom styling applied.
Content-Only Card (No Header)
This card has only content, no header or footer sections.

HTML Output Inspection

Use browser dev tools to inspect the HTML output and ensure it's identical.

Include Version HTML:

Cotton Version HTML: