Button

A versatile button component that provides consistent interaction patterns across Web, iOS, and Android platforms.

Features

• Multiple variants (primary, secondary, outline, ghost)
• Size options (sm, md, lg)
• Loading states
• Icon support
• Disabled states
• Accessibility built-in

Usage

Web (React)

import { Button } from '@cuppa/ui'

function MyComponent() {
  return (
    <>
      <Button variant="primary" size="md">
        Click me
      </Button>

      <Button variant="outline" disabled>
        Disabled
      </Button>

      <Button variant="primary" loading>
        Loading...
      </Button>
    </>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  var body: some View {
    VStack {
      CuppaButton("Click me", variant: .primary)
        .onTap { print("Tapped!") }

      CuppaButton("Disabled", variant: .outline)
        .disabled(true)

      CuppaButton("Loading", variant: .primary)
        .loading(true)
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaButton
import com.cuppa.ui.components.ButtonVariant

@Composable
fun MyScreen() {
  Column {
    CuppaButton(
      text = "Click me",
      variant = ButtonVariant.Primary,
      onClick = { println("Tapped!") }
    )

    CuppaButton(
      text = "Disabled",
      variant = ButtonVariant.Outline,
      enabled = false
    )

    CuppaButton(
      text = "Loading",
      variant = ButtonVariant.Primary,
      loading = true
    )
  }
}

Props

Variants

| Variant | Description | Use Case | |---------|-------------|----------| | primary | Solid background, high emphasis | Primary actions | | secondary | Subtle fill, medium emphasis | Secondary actions | | outline | Border only, low emphasis | Alternative actions | | ghost | No background, minimal emphasis | Tertiary actions | | destructive | Red/error color | Dangerous actions |

Sizes

• sm: 32px height, 12px padding
• md: 40px height, 16px padding (default)
• lg: 48px height, 20px padding

Common Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | string | 'primary' | Button style variant | | size | string | 'md' | Button size | | disabled | boolean | false | Disable interaction | | loading | boolean | false | Show loading spinner | | icon | element | - | Optional icon element | | fullWidth | boolean | false | Take full container width |

Examples

With Icons

<Button icon={<PlusIcon />}>
  Add Item
</Button>

Full Width

<Button fullWidth variant="primary">
  Submit Form
</Button>

Loading State

<Button loading={isSubmitting} onClick={handleSubmit}>
  {isSubmitting ? 'Saving...' : 'Save'}
</Button>

Accessibility

• Proper ARIA labels
• Keyboard navigation support
• Focus indicators
• Screen reader announcements
• Disabled state properly communicated

Best Practices

1. Use primary variant sparingly (one per screen)
2. Provide clear, action-oriented labels
3. Show loading states during async operations
4. Use destructive variant for dangerous actions
5. Ensure minimum 44px touch target on mobile