Skip to content

Add (SVG) icon support to Button component and clean up variants #7743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
beseku wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Add (SVG) icon support to Button component and clean up variants #7743

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
38a2b21
Update button to use icons correctly and apply correct variant names
beseku Apr 2, 2026
3049284
Apply variant changes to apps
beseku Apr 2, 2026
a927b32
Add icon font support as well as SVGs
beseku Apr 2, 2026
dd611fd
Caught a missing old variant
beseku Apr 2, 2026
3ed011b
Fixes for the rabbit
beseku Apr 2, 2026
76cc92a
Fix implementaion of links to follow best practice
beseku Apr 2, 2026
dd4c176
Fix build error in Docs
beseku Apr 2, 2026
fa507ea
Merge branch 'main' into add-icons-to-buttons
beseku Apr 2, 2026
1f21e1c
Fix merge regression
beseku Apr 2, 2026
7a5fafc
Fix merge regression
beseku Apr 2, 2026
f629e20
Fix merge regression
beseku Apr 2, 2026
018bfd7
Merge branch 'main' into add-icons-to-buttons
beseku Apr 2, 2026
2fb1f1f
Fix merge regression
beseku Apr 2, 2026
2b9a460
Merge branch 'main' into add-icons-to-buttons
beseku Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 37 additions & 105 deletions apps/docs/src/components/eclipse-showcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ export function EclipseShowcase() {
<div className="not-prose my-8 space-y-8">
{/* Dark Mode Toggle */}
<div className="flex items-center justify-between rounded-lg border border-stroke-neutral p-4 bg-background-neutral-weak">
<span className="text-sm font-medium text-foreground-neutral">
Theme Mode
</span>
<span className="text-sm font-medium text-foreground-neutral">Theme Mode</span>
<button
onClick={() => setIsDark(!isDark)}
className="rounded-square bg-background-neutral px-4 py-2 text-sm font-medium text-foreground-neutral hover:bg-background-neutral-strong transition-colors"
Expand All @@ -31,87 +29,63 @@ export function EclipseShowcase() {

{/* Button Variants */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Button Variants
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Button Variants</h3>
<div className="flex flex-wrap gap-4">
<Button variant="default">Default</Button>
<Button variant="ppg">Prisma Pulse & Accelerate</Button>
<Button variant="orm">Prisma ORM</Button>
<Button variant="error">Error</Button>
<Button variant="default-stronger">Default Stronger</Button>
<Button variant="default-weaker">Default Weaker</Button>
<Button variant="default-strong">Default Stronger</Button>
<Button variant="default-weak">Default Weaker</Button>
<Button variant="link">Link</Button>
</div>
</section>

{/* Button Sizes */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Button Sizes
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Button Sizes</h3>
<div className="flex flex-wrap items-center gap-4">
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">2 Extra Large</Button>
<Button size="4xl">4 Extra Large</Button>
<Button size="3xl">3 Extra Large</Button>
</div>
</section>

{/* Color Palette - Backgrounds */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Background Colors
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Background Colors</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-neutral">
Neutral
</span>
<span className="text-sm font-medium text-foreground-neutral">Neutral</span>
</div>
<div className="p-4 bg-background-ppg rounded-square border border-stroke-ppg">
<span className="text-sm font-medium text-foreground-neutral">
PPG
</span>
<span className="text-sm font-medium text-foreground-neutral">PPG</span>
</div>
<div className="p-4 bg-background-orm rounded-square border border-stroke-orm">
<span className="text-sm font-medium text-foreground-neutral">
ORM
</span>
<span className="text-sm font-medium text-foreground-neutral">ORM</span>
</div>
<div className="p-4 bg-background-error rounded-square border border-stroke-error">
<span className="text-sm font-medium text-foreground-neutral">
Error
</span>
<span className="text-sm font-medium text-foreground-neutral">Error</span>
</div>
<div className="p-4 bg-background-success rounded-square border border-stroke-success">
<span className="text-sm font-medium text-foreground-neutral">
Success
</span>
<span className="text-sm font-medium text-foreground-neutral">Success</span>
</div>
<div className="p-4 bg-background-warning rounded-square border border-stroke-warning">
<span className="text-sm font-medium text-foreground-neutral">
Warning
</span>
<span className="text-sm font-medium text-foreground-neutral">Warning</span>
</div>
<div className="p-4 bg-background-cyan rounded-square border border-stroke-cyan">
<span className="text-sm font-medium text-foreground-neutral">
Cyan
</span>
<span className="text-sm font-medium text-foreground-neutral">Cyan</span>
</div>
<div className="p-4 bg-background-fuchsia rounded-square border border-stroke-fuchsia">
<span className="text-sm font-medium text-foreground-neutral">
Fuchsia
</span>
<span className="text-sm font-medium text-foreground-neutral">Fuchsia</span>
</div>
</div>
</section>

{/* Foreground Colors */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Foreground Colors
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Foreground Colors</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-ppg">PPG</span>
Expand All @@ -120,43 +94,29 @@ export function EclipseShowcase() {
<span className="text-sm font-medium text-foreground-orm">ORM</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-error">
Error
</span>
<span className="text-sm font-medium text-foreground-error">Error</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-success">
Success
</span>
<span className="text-sm font-medium text-foreground-success">Success</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-warning">
Warning
</span>
<span className="text-sm font-medium text-foreground-warning">Warning</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-cyan">
Cyan
</span>
<span className="text-sm font-medium text-foreground-cyan">Cyan</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-violet">
Violet
</span>
<span className="text-sm font-medium text-foreground-violet">Violet</span>
</div>
<div className="p-4 bg-background-neutral rounded-square border border-stroke-neutral">
<span className="text-sm font-medium text-foreground-pink">
Pink
</span>
<span className="text-sm font-medium text-foreground-pink">Pink</span>
</div>
</div>
</section>

{/* Typography */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Typography
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Typography</h3>
<div className="space-y-2">
<p className="text-2xs text-foreground-neutral">2XS - 11px</p>
<p className="text-xs text-foreground-neutral">XS - 12px</p>
Expand All @@ -171,58 +131,40 @@ export function EclipseShowcase() {
<div className="space-y-2 pt-4">
<p className="font-normal text-foreground-neutral">Normal (400)</p>
<p className="font-medium text-foreground-neutral">Medium (500)</p>
<p className="font-semibold text-foreground-neutral">
Semibold (600)
</p>
<p className="font-semibold text-foreground-neutral">Semibold (600)</p>
<p className="font-bold text-foreground-neutral">Bold (750)</p>
<p className="font-ultra-bold text-foreground-neutral">
Ultra Bold (900)
</p>
<p className="font-ultra-bold text-foreground-neutral">Ultra Bold (900)</p>
</div>
</section>

{/* Border Radius */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Border Radius-
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Border Radius-</h3>
<div className="flex flex-wrap gap-4">
<div className="px-6 py-4 bg-background-orm rounded-low border border-stroke-orm">
<span className="text-sm font-medium text-foreground-neutral">
Low (3px)
</span>
<span className="text-sm font-medium text-foreground-neutral">Low (3px)</span>
</div>
<div className="px-6 py-4 bg-background-orm rounded-square border border-stroke-orm">
<span className="text-sm font-medium text-foreground-neutral">
Square (6px)
</span>
<span className="text-sm font-medium text-foreground-neutral">Square (6px)</span>
</div>
<div className="px-6 py-4 bg-background-orm rounded-square-high border border-stroke-orm">
<span className="text-sm font-medium text-foreground-neutral">
High (12px)
</span>
<span className="text-sm font-medium text-foreground-neutral">High (12px)</span>
</div>
<div className="px-6 py-4 bg-background-orm rounded-circle border border-stroke-orm">
<span className="text-sm font-medium text-foreground-neutral">
Circle
</span>
<span className="text-sm font-medium text-foreground-neutral">Circle</span>
</div>
</div>
</section>

{/* Semantic Patterns */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Semantic Patterns
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Semantic Patterns</h3>

<div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
<div className="flex items-start gap-3">
<span className="text-foreground-error">⚠️</span>
<div>
<h4 className="font-semibold text-foreground-error">
Error Message
</h4>
<h4 className="font-semibold text-foreground-error">Error Message</h4>
<p className="text-sm text-foreground-error-weak">
This is an example error message using semantic tokens.
</p>
Expand All @@ -234,9 +176,7 @@ export function EclipseShowcase() {
<div className="flex items-start gap-3">
<span className="text-foreground-success">✓</span>
<div>
<h4 className="font-semibold text-foreground-success">
Success Message
</h4>
<h4 className="font-semibold text-foreground-success">Success Message</h4>
<p className="text-sm text-foreground-success-weak">
This is an example success message using semantic tokens.
</p>
Expand All @@ -248,9 +188,7 @@ export function EclipseShowcase() {
<div className="flex items-start gap-3">
<span className="text-foreground-warning">!</span>
<div>
<h4 className="font-semibold text-foreground-warning">
Warning Message
</h4>
<h4 className="font-semibold text-foreground-warning">Warning Message</h4>
<p className="text-sm text-foreground-warning-weak">
This is an example warning message using semantic tokens.
</p>
Expand All @@ -261,19 +199,13 @@ export function EclipseShowcase() {

{/* Gradients */}
<section className="space-y-4">
<h3 className="text-xl font-semibold text-foreground-neutral">
Gradients
</h3>
<h3 className="text-xl font-semibold text-foreground-neutral">Gradients</h3>
<div className="space-y-4">
<div className="h-24 bg-gradient-orm rounded-square-high flex items-center justify-center">
<span className="text-lg font-semibold text-foreground-orm-reverse">
ORM Gradient
</span>
<span className="text-lg font-semibold text-foreground-orm-reverse">ORM Gradient</span>
</div>
<div className="h-24 bg-gradient-ppg rounded-square-high flex items-center justify-center">
<span className="text-lg font-semibold text-foreground-ppg-reverse">
PPG Gradient
</span>
<span className="text-lg font-semibold text-foreground-ppg-reverse">PPG Gradient</span>
</div>
</div>
</section>
Expand Down
Loading
Loading