Personizely UI

Appearance

Button ​

Buttons are used for various interactive actions.

Examples ​

Basic button ​

Code

vue
<template>
  <div class="flex gap-2">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
    >
      Basic button
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Secondary button ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="secondary"
    >
      Secondary
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Destructive button ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="destructive"
    >
      Delete
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Ghost button ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="ghost"
    >
      Ghost
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="link"
    >
      Link
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Outline button ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="outline"
    >
      Outline
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Button with icon ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      variant="secondary"
      icon="save"
    >
      Secondary
    </Button>
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Icon button ​

Code

vue
<template>
  <div class="flex gap-4">
    <Button
      v-for="size in sizes"
      :key="size"
      :size="size"
      icon="save"
    />
  </div>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>

Disabled button ​

Code

vue
<template>
  <Button disabled>
    Can't click me
  </Button>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

Loading button ​

Code

vue
<template>
  <Button loading>
    Loading
  </Button>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

Button with a tooltip ​

Code

vue
<template>
  <TooltipProvider :delay-duration="100">
    <div class="flex gap-2">
      <Button
        v-for="size in sizes"
        :key="size"
        :size="size"
        tooltip="Surprise!"
      >
        Hover for more
      </Button>
    </div>
  </TooltipProvider>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { TooltipProvider } from '@/components/ui/tooltip'

const sizes = ['lg', 'md', 'sm', 'xs', '2xs']
</script>