@redseed/redseed-ui-vue3 8.50.0 → 8.52.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -58,6 +58,24 @@ Button components provide interactive elements for user actions. They come in va
|
|
|
58
58
|
</template>
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
+
### ButtonDanger
|
|
62
|
+
**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.
|
|
63
|
+
**Implementation:**
|
|
64
|
+
```vue
|
|
65
|
+
<template>
|
|
66
|
+
<ButtonDanger @click="handleDelete">Delete</ButtonDanger>
|
|
67
|
+
</template>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### ButtonDangerFull
|
|
71
|
+
**When to use:** Same as ButtonDanger but spans the full width of its container.
|
|
72
|
+
**Implementation:**
|
|
73
|
+
```vue
|
|
74
|
+
<template>
|
|
75
|
+
<ButtonDangerFull @click="handleDelete">Delete</ButtonDangerFull>
|
|
76
|
+
</template>
|
|
77
|
+
```
|
|
78
|
+
|
|
61
79
|
## Button Groups
|
|
62
80
|
|
|
63
81
|
### ButtonGroup
|
|
@@ -103,7 +121,7 @@ Button components provide interactive elements for user actions. They come in va
|
|
|
103
121
|
|
|
104
122
|
## Best Practices
|
|
105
123
|
|
|
106
|
-
1. **Visual Hierarchy:** Use ButtonPrimary for the most important action, ButtonSecondary for supporting actions, and ButtonTertiary for less important actions.
|
|
124
|
+
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).
|
|
107
125
|
2. **Consistent Spacing:** Use ButtonGroup when you have multiple related buttons to ensure consistent spacing.
|
|
108
126
|
3. **Full Width:** Use full-width variants when the button should be the primary focus of a section or form.
|
|
109
127
|
4. **Accessibility:** All buttons include proper ARIA attributes and keyboard navigation support.
|
package/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from 'vue'
|
|
3
|
+
import ButtonSlot from './ButtonSlot.vue'
|
|
4
|
+
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
invert: {
|
|
7
|
+
type: Boolean,
|
|
8
|
+
default: false,
|
|
9
|
+
},
|
|
10
|
+
})
|
|
11
|
+
|
|
12
|
+
const buttonClass = computed(() => [
|
|
13
|
+
'rsui-button-danger',
|
|
14
|
+
{
|
|
15
|
+
'rsui-button-danger--invert': props.invert,
|
|
16
|
+
},
|
|
17
|
+
])
|
|
18
|
+
</script>
|
|
19
|
+
<template>
|
|
20
|
+
<ButtonSlot :class="buttonClass">
|
|
21
|
+
<slot></slot>
|
|
22
|
+
</ButtonSlot>
|
|
23
|
+
</template>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import ButtonDanger from './ButtonDanger.vue'
|
|
3
|
+
|
|
4
|
+
defineProps({
|
|
5
|
+
invert: {
|
|
6
|
+
type: Boolean,
|
|
7
|
+
default: false,
|
|
8
|
+
},
|
|
9
|
+
})
|
|
10
|
+
</script>
|
|
11
|
+
<template>
|
|
12
|
+
<ButtonDanger full :invert="invert">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</ButtonDanger>
|
|
15
|
+
</template>
|
|
@@ -4,6 +4,8 @@ import ButtonSecondary from './ButtonSecondary.vue'
|
|
|
4
4
|
import ButtonSecondaryFull from './ButtonSecondaryFull.vue'
|
|
5
5
|
import ButtonTertiary from './ButtonTertiary.vue'
|
|
6
6
|
import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
|
|
7
|
+
import ButtonDanger from './ButtonDanger.vue'
|
|
8
|
+
import ButtonDangerFull from './ButtonDangerFull.vue'
|
|
7
9
|
import ButtonSlot from './ButtonSlot.vue'
|
|
8
10
|
|
|
9
11
|
export {
|
|
@@ -13,5 +15,7 @@ export {
|
|
|
13
15
|
ButtonSecondaryFull,
|
|
14
16
|
ButtonTertiary,
|
|
15
17
|
ButtonTertiaryFull,
|
|
18
|
+
ButtonDanger,
|
|
19
|
+
ButtonDangerFull,
|
|
16
20
|
ButtonSlot,
|
|
17
21
|
}
|