UIButton

UIButton

A versatile button component that supports different types, sizes, states, and customizations.

<template>
  <UIButton
    type="primary"
    size="medium"
    :loading="loading"
    :disabled="disabled"
    @click="handleClick"
  >
    <template #icon>
      <PlusIcon class="w-5 h-5" />
    </template>
    Create New
  </UIButton>
</template>

<script setup lang="ts">
const loading = ref(false)
const disabled = ref(false)

const handleClick = () => {
  loading.value = true
  // Handle click action
}
</script>

Props

• type (‘default’ | ‘primary’ | ‘success’ | ‘warning’ | ‘error’ | ‘info’): Button type
• size (‘small’ | ‘medium’ | ‘large’): Button size
• loading (boolean): Show loading state
• disabled (boolean): Disable button
• block (boolean): Full width button
• ghost (boolean): Transparent background
• dashed (boolean): Dashed border style
• text (boolean): Text only style
• link (boolean): Link style
• round (boolean): Round corners
• circle (boolean): Circular shape
• icon (boolean): Icon only button
• htmlType (‘button’ | ‘submit’ | ‘reset’): HTML button type
• href (string): URL for link buttons
• target (string): Target for link buttons

Events

• click: Emitted when button is clicked
• focus: Emitted when button is focused
• blur: Emitted when button loses focus

Slots

• default: Button content
• icon: Icon content
• loading: Custom loading indicator

Usage Examples

1. Primary Button:

<template>
  <UIButton type="primary">
    Submit
  </UIButton>
</template>

2. Loading Button:

<template>
  <UIButton
    type="primary"
    :loading="isLoading"
    @click="handleSubmit"
  >
    {{ isLoading ? 'Submitting...' : 'Submit' }}
  </UIButton>
</template>

3. Icon Button:

<template>
  <UIButton
    type="default"
    :circle="true"
  >
    <template #icon>
      <EditIcon class="w-5 h-5" />
    </template>
  </UIButton>
</template>

4. Text Button:

<template>
  <UIButton text>
    Cancel
  </UIButton>
</template>

5. Link Button:

<template>
  <UIButton
    link
    href="https://example.com"
    target="_blank"
  >
    Learn More
  </UIButton>
</template>

Best Practices

1. Visual Hierarchy:

   • Use primary buttons for main actions
   • Use default buttons for secondary actions
   • Use text/link buttons for tertiary actions
   • Maintain consistent sizing within contexts

2. Loading States:

   • Show loading state during async operations
   • Disable button while loading
   • Provide feedback on completion

3. Accessibility:

   • Use descriptive text for screen readers
   • Maintain sufficient color contrast
   • Support keyboard navigation
   • Add aria-labels when needed

4. Responsive Design:

   • Use appropriate sizes for different screens
   • Consider touch targets on mobile
   • Adapt button width as needed
   • Handle long text gracefully

5. Error Prevention:

   • Disable buttons when actions are invalid
   • Confirm destructive actions
   • Provide clear feedback
   • Handle double clicks appropriately