button

Go back link button with animation

Go back link button with animation

Загрузка превью…

src/button/c-button-50.vue

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

<template>
  <Button variant="link" class="group/back-button" as-child>
    <a href="#">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        data-icon="inline-start"
        aria-hidden="true"
        class="lucide lucide-chevron-left transition-transform duration-200 group-hover/back-button:-translate-x-1"
      >
        <path d="m15 18-6-6 6-6" />
      </svg>
      Go back
    </a>
  </Button>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-button-50.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)