diff --git a/components/src/base-badge/base-badge.story.vue b/components/src/base-badge/base-badge.story.vue
index 574b2d6d..38739488 100644
--- a/components/src/base-badge/base-badge.story.vue
+++ b/components/src/base-badge/base-badge.story.vue
@@ -5,6 +5,7 @@ import BaseBadge from './base-badge.vue';
const state = reactive({
size: 'medium',
label: 'Badge',
+ color: 'primary',
caps: false,
border: false,
});
@@ -22,11 +23,19 @@ const state = reactive({
large: 'Large',
}"
/>
+
-
+
diff --git a/components/src/base-badge/base-badge.vue b/components/src/base-badge/base-badge.vue
index 6e16a2a6..e465407d 100644
--- a/components/src/base-badge/base-badge.vue
+++ b/components/src/base-badge/base-badge.vue
@@ -13,8 +13,7 @@ export interface BaseBadgeProps {
* Color of the badge.
* @values primary, white, danger
*/
- // TODO: What colors are we allowing for badges?
- color?: 'primary';
+ color?: 'primary' | 'gray';
/**
* Whether the badge should be displayed in all caps.
@@ -83,6 +82,15 @@ const badgeClass = computed(() => {
props.border && 'border'
);
});
+
+const borderColor = computed(() => {
+ switch (props.color) {
+ case 'primary':
+ return 'var(--purple-300)';
+ default:
+ return 'var(--gray-300)';
+ }
+});
@@ -111,6 +119,11 @@ const badgeClass = computed(() => {
color: var(--purple-600);
}
+.badge-gray {
+ background-color: var(--gray-50);
+ color: var(--gray-600);
+}
+
/* Sizes */
.badge-small {
font-size: var(--text-xs);
@@ -129,7 +142,7 @@ const badgeClass = computed(() => {
/* Props */
.border {
- border: 1px solid var(--purple-200);
+ border: 1px solid v-bind(borderColor);
}
.caps {