Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Buttons

Button component examples.

Fill Buttons

<button class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Default</button>
<button class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Primary</button>
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Success</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Warning</button>
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Danger</button>

Outline Buttons

<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- check icon --></svg>
  Default
</button>
<button class="border border-alpine-500 text-alpine-500 hover:bg-alpine-50 px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- star icon --></svg>
  Primary
</button>
<button class="border border-green-500 text-green-600 hover:bg-green-50 px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- check icon --></svg>
  Success
</button>
<button class="border border-yellow-500 text-yellow-600 hover:bg-yellow-50 px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- warning icon --></svg>
  Warning
</button>
<button class="border border-red-500 text-red-600 hover:bg-red-50 px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- close icon --></svg>
  Danger
</button>

Subtle Buttons

<button class="bg-alpine-50 text-alpine-600 hover:bg-alpine-100 px-4 py-2.5 rounded-lg text-sm font-medium">Primary</button>
<button class="bg-green-50 text-green-700 hover:bg-green-100 px-4 py-2.5 rounded-lg text-sm font-medium">Success</button>
<button class="bg-yellow-50 text-yellow-700 hover:bg-yellow-100 px-4 py-2.5 rounded-lg text-sm font-medium">Warning</button>
<button class="bg-red-50 text-red-600 hover:bg-red-100 px-4 py-2.5 rounded-lg text-sm font-medium">Danger</button>

Button Sizes

<button class="bg-alpine-500 hover:bg-alpine-600 text-white rounded-lg font-medium text-xs px-3 py-1.5">Small</button>
<button class="bg-alpine-500 hover:bg-alpine-600 text-white rounded-lg font-medium text-sm px-4 py-2.5">Default</button>
<button class="bg-alpine-500 hover:bg-alpine-600 text-white rounded-lg font-medium text-base px-6 py-3">Large</button>

Icon Buttons

<!-- Icon + text -->
<button class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2">
  <svg class="w-4 h-4" ...><!-- heart icon --></svg>
  Like
</button>

<!-- Icon-only button -->
<button class="bg-alpine-500 hover:bg-alpine-600 text-white p-2.5 rounded-lg inline-flex items-center justify-center">
  <svg class="w-5 h-5" ...><!-- star icon --></svg>
</button>

<!-- Loading button -->
<button class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium inline-flex items-center gap-2 opacity-75">
  <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
  </svg>
  Loading
</button>

Button States

<!-- Disabled -->
<button disabled class="bg-alpine-500 text-white px-4 py-2.5 rounded-lg text-sm font-medium opacity-50 cursor-not-allowed">Disabled</button>

<!-- Active -->
<button class="bg-alpine-600 hover:bg-alpine-700 text-white px-4 py-2.5 rounded-lg text-sm font-medium">Active</button>

<!-- Disabled outline -->
<button disabled class="border border-gray-300 text-gray-400 px-4 py-2.5 rounded-lg text-sm font-medium opacity-50 cursor-not-allowed">Disabled Outline</button>

<!-- Disabled subtle -->
<button disabled class="bg-red-50 text-red-400 px-4 py-2.5 rounded-lg text-sm font-medium opacity-50 cursor-not-allowed">Disabled Subtle</button>