Button

export default function Component() {
  return (
    <>
      <!-- Basic Buttons (No background) -->
      <div className="flex items-center gap-4">
        <button className="px-4 py-2 rounded-lg text-sm font-medium text-neutral-900 dark:text-white hover:bg-neutral-200/50 dark:hover:bg-neutral-800 transition-colors">Basic</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">Primary</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Warn</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium text-neutral-400 dark:text-neutral-600 cursor-not-allowed" disabled>Disabled</button>
      </div>
      
      <!-- Raised Buttons (Solid background + shadow) -->
      <div className="flex items-center gap-4">
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-white dark:bg-[#111] text-neutral-900 dark:text-white shadow hover:shadow-md transition-shadow">Basic</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white shadow-md shadow-blue-500/20 hover:shadow-lg hover:shadow-blue-500/30 transition-shadow">Primary</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-red-600 text-white shadow-md shadow-red-500/20 hover:shadow-lg hover:shadow-red-500/30 transition-shadow">Warn</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-400 dark:text-neutral-500 shadow-none cursor-not-allowed" disabled>Disabled</button>
      </div>
      
      <!-- Stroked Buttons (Border outline) -->
      <div className="flex items-center gap-4">
        <button className="px-4 py-2 rounded-lg text-sm font-medium border border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-[#222] transition-colors">Basic</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">Primary</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Warn</button>
      </div>
      
      <!-- Flat Buttons (Solid background, no shadow) -->
      <div className="flex items-center gap-4">
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-neutral-200/50 dark:bg-neutral-800 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors">Basic</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Primary</button>
        <button className="px-4 py-2 rounded-lg text-sm font-medium bg-red-600 text-white hover:bg-red-700 transition-colors">Warn</button>
      </div>
    </>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  template: `
<!-- Basic Buttons (No background) -->
<div class="flex items-center gap-4">
  <button class="px-4 py-2 rounded-lg text-sm font-medium text-neutral-900 dark:text-white hover:bg-neutral-200/50 dark:hover:bg-neutral-800 transition-colors">Basic</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">Primary</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Warn</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium text-neutral-400 dark:text-neutral-600 cursor-not-allowed" disabled>Disabled</button>
</div>

<!-- Raised Buttons (Solid background + shadow) -->
<div class="flex items-center gap-4">
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-white dark:bg-[#111] text-neutral-900 dark:text-white shadow hover:shadow-md transition-shadow">Basic</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white shadow-md shadow-blue-500/20 hover:shadow-lg hover:shadow-blue-500/30 transition-shadow">Primary</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-red-600 text-white shadow-md shadow-red-500/20 hover:shadow-lg hover:shadow-red-500/30 transition-shadow">Warn</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-400 dark:text-neutral-500 shadow-none cursor-not-allowed" disabled>Disabled</button>
</div>

<!-- Stroked Buttons (Border outline) -->
<div class="flex items-center gap-4">
  <button class="px-4 py-2 rounded-lg text-sm font-medium border border-neutral-300 dark:border-neutral-700 text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-[#222] transition-colors">Basic</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">Primary</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Warn</button>
</div>

<!-- Flat Buttons (Solid background, no shadow) -->
<div class="flex items-center gap-4">
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-neutral-200/50 dark:bg-neutral-800 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors">Basic</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Primary</button>
  <button class="px-4 py-2 rounded-lg text-sm font-medium bg-red-600 text-white hover:bg-red-700 transition-colors">Warn</button>
</div>
  `
})
export class AngularComponent {}