Interactive element.
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-primary text-primary-foreground">Primary</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-primary text-primary-foreground">Primary</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-muted text-muted-foreground">Secondary</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-muted text-muted-foreground">Secondary</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-red-500 text-white">Destructive</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-red-500 text-white">Destructive</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-green-500 text-white">Success</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-green-500 text-white">Success</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-yellow-500 text-white">Warning</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-yellow-500 text-white">Warning</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-blue-500 text-white">Info</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-blue-500 text-white">Info</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-purple-500 text-white">Purple</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-purple-500 text-white">Purple</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-orange-500 text-white">Orange</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-orange-500 text-white">Orange</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-pink-500 text-white">Pink</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-pink-500 text-white">Pink</button>
<button class="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-teal-500 text-white">Teal</button>
<button className="h-10 px-4 py-2 rounded-md font-medium transition-colors hover:opacity-90 bg-teal-500 text-white">Teal</button>
<button class="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-primary text-primary">Primary Outline</button>
<button className="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-primary text-primary">Primary Outline</button>
<button class="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-muted-foreground text-muted-foreground">Secondary Outline</button>
<button className="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-muted-foreground text-muted-foreground">Secondary Outline</button>
<button class="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-red-500 text-red-500">Destructive Outline</button>
<button className="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-red-500 text-red-500">Destructive Outline</button>
<button class="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-green-500 text-green-500">Success Outline</button>
<button className="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-green-500 text-green-500">Success Outline</button>
<button class="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-yellow-500 text-yellow-500">Warning Outline</button>
<button className="h-10 px-4 py-2 border bg-transparent rounded-md font-medium hover:bg-accent hover:text-accent-foreground border-yellow-500 text-yellow-500">Warning Outline</button>
On This Page