9.7k

Button

PreviousNext

Displays a button or a component that looks like a button.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <VButton variant="outlined">
      Button
    </VButton>
    <VButton variant="outlined" icon-only aria-label="Submit">
      <span aria-hidden="true">↑</span>
    </VButton>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add button

Usage

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

<template>
  <Button variant="outline">
    Button
  </Button>
</template>

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

tailwind.css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <VButton size="small">
      Small
    </VButton>
    <VButton>
      Medium
    </VButton>
    <VButton size="large">
      Large
    </VButton>
  </div>
</template>

Default

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton>
      Default
    </VButton>
</template>

Outline

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton variant="outlined">
      Outline
    </VButton>
</template>

Secondary

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton color="secondary">
      Secondary
    </VButton>
</template>

Ghost

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton variant="tetriary">
      Ghost
    </VButton>
</template>

Destructive

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton color="red">
      Delete
    </VButton>
</template>

Link

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton variant="link">
      Read docs
    </VButton>
</template>

Icon

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton variant="outlined" icon-only aria-label="Submit">
      <span aria-hidden="true">↑</span>
    </VButton>
</template>
<template>
  <Button variant="outline" size="icon" aria-label="Submit">
    <CircleFadingArrowUpIcon />
  </Button>
</template>

With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton>
      <span aria-hidden="true">+</span>
      <span>New project</span>
    </VButton>
</template>

Rounded

Use the rounded-full class to make the button rounded.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton pill>
      Rounded
    </VButton>
</template>

Spinner

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VButton loading>
      Saving
    </VButton>
</template>

Button Group

<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <div class="flex flex-col items-start gap-4">
    <div class="inline-flex gap-0">
      <VButton squared variant="outlined">
        Back
      </VButton>
      <VButton squared>
        Continue
      </VButton>
    </div>

    <div class="inline-flex gap-0">
      <VButton squared variant="outlined" size="small">
        Archive
      </VButton>
      <VButton squared variant="outlined" size="small">
        Share
      </VButton>
      <VButton squared size="small">
        Publish
      </VButton>
    </div>
  </div>
</template>

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

Link (asChild)

You can use the as-child prop to make another component look like a button. Here's an example of a link that looks like a button.

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

<template>
  <Button as-child>
    <a href="/login">Login</a>
  </Button>
</template>

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

PropTypeDefault
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""default"
asChildbooleanfalse
BreadcrumbButton Group