initial

layers/ui/components/badge/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="[cn.b(), cn.m(type)]">
+    <slot name="prefix">
+      <Component
+        :is="resolveComponent(`ui-icon-${icon}`)"
+        v-if="icon"
+      />
+    </slot>
+
+    <slot> {{ text }}</slot>
+
+    <slot name="suffix" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BadgeType } from './types'
+import type { UiIcon } from '#build/types/ui/icons'
+
+export interface Props {
+  type?: BadgeType
+  text?: string
+  icon?: UiIcon
+}
+
+defineOptions({
+  name: 'UiBadge',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'neutral',
+})
+
+const cn = useClassname('ui-badge')
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>

layers/ui/components/badge/styles.scss

@@ -0,0 +1,47 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+@use 'sass:selector';
+
+.ui-badge {
+  @include txt-s-m;
+
+  display: inline-flex;
+  align-items: center;
+
+  gap: 4px;
+  padding: 4.5px 8.73px;
+  border-radius: 8px;
+  color: var(--badge-color);
+  background-color: var(--badge-background);
+  white-space: nowrap;
+
+  @include element-variant('badge', 'neutral', (
+          'color': $clr-cyan-500,
+          'background': $clr-grey-300,
+  ));
+
+  @include element-variant('badge', 'positive', (
+          'color': $clr-green-500,
+          'background': $clr-green-100,
+  ));
+
+  @include element-variant('badge', 'warning', (
+          'color': $clr-warn-500,
+          'background': $clr-warn-200,
+  ));
+
+  @include element-variant('badge', 'negative', (
+          'color': $clr-red-500,
+          'background': $clr-red-100,
+  ));
+
+  @include element-variant('badge', 'marketing', (
+          'color': $clr-white,
+          'background': $clr-cyan-300,
+  ));
+
+  @include element-variant('badge', 'extended', (
+          'color': $clr-cyan-500,
+          'background': $clr-white,
+  ));
+}

layers/ui/components/badge/types.ts

@@ -0,0 +1,16 @@
+export const BADGE_TYPES = [
+  'neutral',
+  'positive',
+  'warning',
+  'negative',
+  'marketing',
+  'extended',
+] as const
+
+export type BadgeType = (typeof BADGE_TYPES)[number]
+
+export interface AlertProps {
+  type?: BadgeType
+  title?: string
+  text?: string
+}