@redseed/redseed-ui-vue3 8.51.0 → 8.52.0

package/docs/02-button-components.md

@@ -58,6 +58,24 @@ Button components provide interactive elements for user actions. They come in va
 </template>
 ```
 
+### ButtonDanger
+**When to use:** For destructive, irreversible actions such as "Delete", "Remove", "Revoke", or "Discard". The red (Error) fill gives a consistent, accessible signal that an action has serious consequences — don't use it for routine confirmations.
+**Implementation:**
+```vue
+<template>
+  <ButtonDanger @click="handleDelete">Delete</ButtonDanger>
+</template>
+```
+
+### ButtonDangerFull
+**When to use:** Same as ButtonDanger but spans the full width of its container.
+**Implementation:**
+```vue
+<template>
+  <ButtonDangerFull @click="handleDelete">Delete</ButtonDangerFull>
+</template>
+```
+
 ## Button Groups
 
 ### ButtonGroup
@@ -103,7 +121,7 @@ Button components provide interactive elements for user actions. They come in va
 
 ## Best Practices
 
-1. **Visual Hierarchy:** Use ButtonPrimary for the most important action, ButtonSecondary for supporting actions, and ButtonTertiary for less important actions.
+1. **Visual Hierarchy:** Use ButtonPrimary for the most important action, ButtonSecondary for supporting actions, and ButtonTertiary for less important actions. Reserve ButtonDanger for destructive, irreversible actions (delete, remove, revoke).
 2. **Consistent Spacing:** Use ButtonGroup when you have multiple related buttons to ensure consistent spacing.
 3. **Full Width:** Use full-width variants when the button should be the primary focus of a section or form.
 4. **Accessibility:** All buttons include proper ARIA attributes and keyboard navigation support.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.51.0",
+    "version": "8.52.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Button/ButtonDanger.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+const props = defineProps({
+    invert: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const buttonClass = computed(() => [
+    'rsui-button-danger',
+    {
+        'rsui-button-danger--invert': props.invert,
+    },
+])
+</script>
+<template>
+<ButtonSlot :class="buttonClass">
+    <slot></slot>
+</ButtonSlot>
+</template>

package/src/components/Button/ButtonDangerFull.vue

@@ -0,0 +1,15 @@
+<script setup>
+import ButtonDanger from './ButtonDanger.vue'
+
+defineProps({
+    invert: {
+        type: Boolean,
+        default: false,
+    },
+})
+</script>
+<template>
+<ButtonDanger full :invert="invert">
+    <slot></slot>
+</ButtonDanger>
+</template>

package/src/components/Button/index.js

@@ -4,6 +4,8 @@ import ButtonSecondary from './ButtonSecondary.vue'
 import ButtonSecondaryFull from './ButtonSecondaryFull.vue'
 import ButtonTertiary from './ButtonTertiary.vue'
 import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
+import ButtonDanger from './ButtonDanger.vue'
+import ButtonDangerFull from './ButtonDangerFull.vue'
 import ButtonSlot from './ButtonSlot.vue'
 
 export {
@@ -13,5 +15,7 @@ export {
     ButtonSecondaryFull,
     ButtonTertiary,
     ButtonTertiaryFull,
+    ButtonDanger,
+    ButtonDangerFull,
     ButtonSlot,
 }