button

Destructive button with an icon on the left

Destructive button with an icon on the left

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

src/button/c-button-22.vue

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

<template>
  <Button variant="destructive">
    <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"
      aria-hidden="true"
      class="lucide lucide-trash-2"
    >
      <path d="M10 11v6" />
      <path d="M14 11v6" />
      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
      <path d="M3 6h18" />
      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
    </svg>
    Delete Account
  </Button>
</template>

Установка

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

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

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