Button

Buttons are essential interactive elements that trigger actions when clicked.

Basic Usage

The most basic button uses the .btn class.

<button class="btn">Button</button>

Variants

SageUI provides several button variants for different use cases and visual hierarchy.

Brand Colors

Brand Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

Semantic Colors

Semantic Variants

<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-info">Info</button>

Style Variants

Style Variants

<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-link">Link</button>

Sizes

Buttons come in four different sizes to fit various design contexts.

Button Sizes

<button class="btn btn-primary btn-xs">Extra Small</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

States

Disabled

Disabled Buttons

<button class="btn" disabled>Disabled</button>
<button class="btn btn-primary" disabled>Disabled Primary</button>
<button class="btn btn-outline" disabled>Disabled Outline</button>

Loading

Loading Buttons

<button class="btn btn-primary">
  <div class="spinner spinner-sm mr-2"></div>
  Loading...
</button>

Active

Active State

<button class="btn btn-active">Active</button>
<button class="btn btn-primary btn-active">Active Primary</button>

With Icons

Buttons work perfectly with icons to provide additional context.

Buttons with Icons

<!-- Icon before text -->
<button class="btn btn-primary">
  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  Add Item
</button>

<!-- Icon after text -->
<button class="btn btn-ghost">
  Download
  <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
  </svg>
</button>

Icon Only

For compact interfaces, buttons can contain only icons.

Icon-only Buttons

<button class="btn btn-square">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  </svg>
</button>

<button class="btn btn-circle btn-primary">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
  </svg>
</button>

Block Buttons

Buttons can span the full width of their container.

Block Buttons

<button class="btn btn-primary btn-block">Block Button</button>
<button class="btn btn-outline btn-block">Another Block Button</button>

Button Groups

Group related buttons together for better organization.

Button Groups

<div class="btn-group">
  <button class="btn btn-active">Left</button>
  <button class="btn">Center</button>
  <button class="btn">Right</button>
</div>

TypeScript Usage

import { Button } from 'sageui';

// Create a button instance
const button = new Button({
  variant: 'primary',
  size: 'lg',
  children: 'Click me!',
  onClick: () => {
    console.log('Button clicked!');
  }
});

// Mount to DOM
button.mount('#button-container');

CSS Classes Reference

Class	Description
.btn	Base button styles
.btn-primary	Primary button variant (green)
.btn-secondary	Secondary button variant (forest green)
.btn-accent	Accent button variant (emerald)
.btn-success	Success state button (green)
.btn-warning	Warning state button (amber)
.btn-error	Error state button (red)
.btn-info	Info state button (blue)
.btn-ghost	Transparent button with subtle hover
.btn-outline	Button with border and transparent background
.btn-link	Button styled like a text link
.btn-xs	Extra small button size
.btn-sm	Small button size
.btn-lg	Large button size
.btn-square	Square button (equal width and height)
.btn-circle	Circular button
.btn-block	Full-width button
.btn-active	Active/pressed state
.btn-group	Container for grouping buttons

Accessibility

SageUI buttons are built with accessibility in mind:

• Keyboard Navigation: Full support for Tab, Enter, and Space key interactions
• Focus Management: Visible focus indicators that meet WCAG contrast requirements
• Screen Readers: Proper semantic HTML with support for ARIA attributes
• Color Contrast: All color variants meet WCAG AA standards
• Disabled State: Properly handled with aria-disabled and prevented interactions

Best Practices

• Use descriptive button text that clearly indicates the action
• Include aria-label for icon-only buttons
• Use aria-describedby to associate help text with buttons
• Consider loading states for async actions

<!-- Good: Descriptive text -->
<button class="btn btn-primary">Save Changes</button>

<!-- Good: Icon button with aria-label -->
<button class="btn btn-square" aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Good: Button with description -->
<button class="btn btn-primary" aria-describedby="save-help">
  Save
</button>
<div id="save-help">This will save your changes permanently</div>

Examples

Call-to-Action Section

Ready to get started?

Join thousands of developers building with SageUI

<div class="text-center py-12">
  <h2 class="text-3xl font-bold mb-4">Ready to get started?</h2>
  <p class="text-gray-600 mb-8">Join thousands of developers building with SageUI</p>
  <div class="space-x-4">
    <button class="btn btn-primary btn-lg">Get Started Free</button>
    <button class="btn btn-outline btn-lg">View Documentation</button>
  </div>
</div>

Form Actions

<div class="flex justify-end space-x-3 pt-4 border-t">
  <button type="button" class="btn btn-ghost">Cancel</button>
  <button type="submit" class="btn btn-primary">
    <div class="spinner spinner-sm mr-2 hidden" id="loading"></div>
    Save Changes
  </button>
</div>