Button.vue

<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const variants = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <UButton v-for="v in variants" :key="v" :variant="v" class="capitalize">{{ v }}</UButton>
    </GallerySection>

    <GallerySection title="Colors">
      <UButton v-for="c in colors" :key="c" :color="c" class="capitalize">{{ c }}</UButton>
    </GallerySection>

    <GallerySection title="Sizes">
      <UButton v-for="s in sizes" :key="s" :size="s">{{ s }}</UButton>
    </GallerySection>

    <GallerySection title="With icons">
      <UButton icon="i-material-symbols-rocket-launch-outline">Launch job</UButton>
      <UButton trailing-icon="i-material-symbols-arrow-forward" color="neutral" variant="outline">Next</UButton>
      <UButton icon="i-material-symbols-stop-circle-outline" color="error" variant="soft">Cancel run</UButton>
    </GallerySection>

    <GallerySection title="States">
      <UButton loading>Submitting</UButton>
      <UButton disabled>Disabled</UButton>
      <UButton :ui="{ base: 'w-40' }" block>Block</UButton>
    </GallerySection>
  </div>
</template>