какие-то приколы, не помню

new-client/src/shared/components/ui/Button.vue

@@ -2,7 +2,8 @@
   <button
     :class="[
       bem.b(),
-      bem.exp(!!type, bem.m(type!)),
+      bem.exp(!!type, bem.m(`type_${type!}`)),
+      bem.exp(!!size, bem.m(`size_${size!}`)),
       bem.is('icon-only', iconOnly),
       bem.is('loading', loading),
       bem.is('disabled', disabled),
@@ -11,21 +12,20 @@
     :disabled="disabled"
     :type="nativeType"
   >
-    <ChadSpinner v-if="loading" class="chad-button__spinner" />
+    <!--    <ChadSpinner v-if="loading" class="chad-button__spinner" /> -->
 
-    <template v-else>
-      <Component :is="icon" v-if="icon" class="chad-button__icon" />
+    <!--    <template v-else> -->
+    <Component :is="icon" v-if="icon" :class="bem.e('icon')" />
 
-      <span v-if="$slots.default">
-        <slot />
-      </span>
-    </template>
+    <span v-if="$slots.default">
+      <slot />
+    </span>
+    <!--    </template> -->
   </button>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue'
-import ChadSpinner from '@shared/components/ui/Spinner.vue'
 import useBem from '@shared/composables/use-bem.ts'
 import { computed, useSlots } from 'vue'
 
@@ -43,10 +43,11 @@ const props = withDefaults(
 export interface ChadButtonProps {
   loading?: boolean
   disabled?: boolean
-  type?: 'secondary'
+  type?: 'secondary' | 'danger'
   nativeType?: 'button' | 'submit'
   icon?: Component
   full?: boolean
+  size?: 'sm' | 'lg'
 }
 
 const slots = useSlots()
@@ -59,13 +60,15 @@ const iconOnly = computed(() => {
 
 <style lang="scss">
 .chad-button {
+  $self: &;
+
   @include font-display-14;
 
   flex-shrink: 0;
   border: none;
   color: var(--ink);
   padding: 0 var(--space-3);
-  height: 44px;
+  height: 36px;
   background-color: var(--yellow);
   font-weight: 700;
   text-align: center;
@@ -82,45 +85,82 @@ const iconOnly = computed(() => {
     aspect-ratio: 1;
   }
 
-  &:hover,
-  &:focus {
-    background-color: var(--yellow-deep);
-  }
-
-  &:active {
-    background-color: var(--ink);
-    color: var(--yellow);
-  }
-
-  &--secondary {
-    background-color: var(--grey-1);
-
+  &:not(:disabled) {
     &:hover,
     &:focus {
-      background-color: var(--grey-2);
+      background-color: var(--yellow-deep);
     }
 
     &:active {
-      background-color: var(--grey-3);
-      color: var(--ink);
+      background-color: var(--ink);
+      color: var(--yellow);
+    }
+  }
+
+  &--size_sm {
+    @include font-body-bold;
+
+    height: 28px;
+    outline-width: 1px;
+    outline-offset: -1px;
+  }
+
+  &--size_lg {
+    height: 44px;
+  }
+
+  &--type_secondary {
+    background-color: var(--paper);
+
+    &:not(:disabled) {
+      &:hover,
+      &:focus {
+        background-color: var(--grey-2);
+      }
+
+      &:active {
+        background-color: var(--yellow);
+        color: var(--ink);
+      }
+    }
+  }
+
+  &--type_danger {
+    outline-color: var(--red);
+    background-color: var(--paper);
+    color: var(--red);
+
+    &:not(:disabled) {
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: var(--red);
+        color: var(--white);
+      }
     }
   }
 
   &:disabled {
     cursor: not-allowed;
-    background-color: var(--grey-1);
-    color: var(--grey-3);
+    opacity: 0.6;
   }
 
   &.is-loading {
-    background-color: var(--grey-1);
-    cursor: wait;
+    --stripe-width: 44px;
+
+    @include diagonal-stripes;
+
+    pointer-events: none;
   }
 
   &__icon {
     &:not(:last-child) {
       margin-right: var(--space-1);
     }
+
+    #{$self}--size_sm & {
+      width: 16px;
+    }
   }
 }
 </style>