@stlhorizon/vue-ui 2.7.0 → 2.7.1
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.
- package/README.md +15 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1024,13 +1024,13 @@ const confirmAction = () => {
|
|
|
1024
1024
|
|
|
1025
1025
|
## Badge
|
|
1026
1026
|
|
|
1027
|
-
A small label component for displaying status, tags, or counts.
|
|
1027
|
+
A small label component for displaying status, tags, or counts with multiple variant options.
|
|
1028
1028
|
|
|
1029
1029
|
### Props
|
|
1030
1030
|
|
|
1031
1031
|
| Prop | Type | Default | Description |
|
|
1032
1032
|
|------|------|---------|-------------|
|
|
1033
|
-
| `variant` | `String` | `'default'` | Visual style (default, secondary, destructive, outline) |
|
|
1033
|
+
| `variant` | `String` | `'default'` | Visual style (default, secondary, destructive, outline, success, warning, info, ghost, link, subtle, dark, light, primaryOutline, destructiveOutline, successOutline, gradient) |
|
|
1034
1034
|
| `size` | `String` | `'md'` | Size variant (sm, md, lg) |
|
|
1035
1035
|
| `shape` | `String` | `'rounded'` | Shape variant (rounded, pill, square) |
|
|
1036
1036
|
| `icon` | `String \| Object` | `null` | Icon component |
|
|
@@ -1055,10 +1055,19 @@ A small label component for displaying status, tags, or counts.
|
|
|
1055
1055
|
<template>
|
|
1056
1056
|
<div class="space-x-2">
|
|
1057
1057
|
<Badge variant="default">New</Badge>
|
|
1058
|
-
<Badge variant="
|
|
1059
|
-
<Badge variant="
|
|
1060
|
-
|
|
1061
|
-
</Badge>
|
|
1058
|
+
<Badge variant="success" size="sm">Active</Badge>
|
|
1059
|
+
<Badge variant="warning" shape="pill">Pending</Badge>
|
|
1060
|
+
<Badge variant="destructive" icon="ExclamationIcon">Error</Badge>
|
|
1061
|
+
<Badge variant="info">Info</Badge>
|
|
1062
|
+
<Badge variant="ghost">Ghost</Badge>
|
|
1063
|
+
<Badge variant="link">Link</Badge>
|
|
1064
|
+
<Badge variant="subtle">Subtle</Badge>
|
|
1065
|
+
<Badge variant="dark">Dark</Badge>
|
|
1066
|
+
<Badge variant="light">Light</Badge>
|
|
1067
|
+
<Badge variant="primaryOutline">Primary Outline</Badge>
|
|
1068
|
+
<Badge variant="destructiveOutline">Destructive Outline</Badge>
|
|
1069
|
+
<Badge variant="successOutline">Success Outline</Badge>
|
|
1070
|
+
<Badge variant="gradient">Gradient</Badge>
|
|
1062
1071
|
<Badge variant="outline" dismissible @dismiss="handleDismiss">
|
|
1063
1072
|
Dismissible
|
|
1064
1073
|
</Badge>
|