Skip to main content

Buttons

Stybber provides ready-to-use, utility-based button styles to help you quickly build interactive UI components.

🟦 Basic Usage​

Use the following button classes:

<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-outline">Outline</button>

📏 Button Sizes​

You can control size with padding and text size classes:

<button class="btn-primary p-2 text-sm">Small</button>
<button class="btn-primary p-3 text-base">Medium</button>
<button class="btn-primary p-4 text-lg">Large</button>

📶 Full Width Button​

To make a button take the full width of its parent:

<button class="btn-primary w-full">Full Width</button>

🚫 Disabled Button​

<button class="btn-primary opacity-50 cursor-not-allowed" disabled>
  Disabled
</button>

🎯 Button Positions​

Use Stybber's positioning utilities with buttons:

<button class="btn-primary fixed bottom-4 right-4">Fixed Button</button>
<button class="btn-outline absolute top-4 left-4">Top Left</button>
<button class="btn-secondary relative">Relative Button</button>

🎨 Customizing Buttons​

Add more style using utilities:

<button class="btn-primary shadow-lg hover:bg-blue-700 transition-all">
  Hover Me
</button>