Button-CTA - Icon Integration Examples

✨ Updated Design System: Buttons use Rajdhani typography and integrate seamlessly with the Icon system.

Example 1: Button with Leading Icon

Buttons can include an optional leading icon to enhance meaning and visual appeal.

Example 2: Icon Size Selection

Icon size automatically adjusts based on button size: size100 (24px) for small/medium, size125 (32px) for large.

Example 3: Optical Balance Effect

Secondary and tertiary buttons apply optical balance blend to icons for visual weight compensation.

Primary (No Blend)

Secondary (With Blend)

Tertiary (With Blend)

Example 4: Icon-Text Spacing

Spacing between icon and text adjusts based on button size: tight (4px) for small, normal (8px) for medium/large.

Example 5: With and Without Icons

Comparison showing buttons with and without icons for the same action.

Without Icon

With Icon