Badge Component

src/components/badge/Badge.stories.tsx

@@ -0,0 +1,39 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Badge from "./Badge";
+import Button from "../button/Button";
+import {IconGitBranch} from "@tabler/icons-react";
+
+const meta: Meta = {
+    title: "Badge",
+    component: Badge
+}
+
+export const Variants = () => {
+    return <>
+
+        {
+            ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
+                // @ts-ignore
+                return <Badge style={{marginRight: ".5rem"}} variant={value}>
+                    {value}
+                </Badge>
+            })
+        }
+
+    </>
+}
+
+export const ButtonExample = () => {
+    return <Button variant={"primary"}>
+        <Button.Icon>
+            <IconGitBranch/>
+        </Button.Icon>
+        Merge Branch
+        <Badge style={{marginLeft: ".5rem"}} variant={"secondary"}>
+            Badge
+        </Badge>
+    </Button>
+}
+
+export default meta

src/components/badge/Badge.style.scss

@@ -0,0 +1,19 @@
+@import "../../styles/helpers";
+
+.badge {
+  @include opacityBox(false);
+
+  padding: .25rem;
+  display: inline-flex;
+  font-size: $tertiaryFontSize;
+  border: none;
+  width: fit-content;
+}
+
+@each $name, $color in $variants {
+  .badge--#{$name} {
+    @include opacityBox(false, $color);
+    font-size: $tertiaryFontSize;
+    border: none;
+  }
+}

src/components/badge/Badge.tsx

@@ -0,0 +1,19 @@
+import React, {HTMLProps} from "react";
+import "./Badge.style.scss"
+
+export interface BadgeType extends HTMLProps<HTMLSpanElement>{
+    children: string
+    //defaults to primary
+    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+}
+
+const Badge: React.FC<BadgeType> = (props) => {
+
+    const {variant = "primary", children, ...args} = props
+
+    return <span {...args} className={`badge badge--${variant}`}>
+        {children}
+    </span>
+}
+
+export default Badge

src/styles/_helpers.scss

@@ -18,6 +18,22 @@
   }
 }
 
+@mixin opacityBox($active: true, $color: $secondary) {
+  background: rgba($color, 0.1);
+  @include border($active);
+  border-radius: $borderRadius;
+  color: rgba($white, .5);
+  font-family: Ubuntu, sans-serif;
+  font-size: $secondaryFontSize;
+  position: relative;
+
+  @if ($active == true) {
+    @include hoverAndActiveContent {
+      background: rgba($color, .2);
+    }
+  }
+}
+
 @mixin hoverAndActiveContent() {
   &:hover, &:active, &--active {
     @content