WIP

Author: EranNL

src/components/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import clsx from 'clsx';
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: Variant | string;
+}
+
+const Tag = React.forwardRef<HTMLDivElement, TagProps>((
+    {
+        children,
+        className,
+        variant
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'tag',
+            `tag-${variant}`,
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Tag.displayName = 'Tag';
+Tag.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    variant: PropTypes.string.isRequired
+}
+
+export default Tag;

src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { default as Tag } from './Tag';

src/components/index.ts

@@ -8,3 +8,4 @@ export * from './Icon';
 export * from './utils';
 export * from './TextField';
 export * from './SelectField';
+export * from './Tag';

src/style/components/_tags.scss

@@ -0,0 +1,28 @@
+.tag {
+    display: inline-block;
+    align-items: center;
+
+    &.tag-primary, &.tag-purple {
+        background: var(--primary-color-light-background);
+        color: var(--primary-color);
+        padding: calc(var(--base-gutter) / 2);
+        border-radius: var(--base-border-radius);
+        font: {
+            weight: 500;
+        }
+    }
+
+    &.tag-danger, &.tag-red {
+        background: var(--danger-color-light-background);
+        color: var(--danger-color);
+        padding: calc(var(--base-gutter) / 2);
+        border-radius: var(--base-border-radius);
+        font: {
+            weight: 500;
+        }
+    }
+
+    + .tag {
+        margin-left: var(--base-gutter);
+    }
+}

src/style/index.scss

@@ -17,6 +17,7 @@
 @use "components/card";
 @use "components/icons";
 @use "components/forms";
+@use "components/tags";
 
 /**
  * 3. Layout

www/src/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { useState } from 'react';
 import * as ReactDom from 'react-dom';
 
 import '../../src/style/index.scss';
-import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, TextField, Variant } from '../../src';
+import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
 import FormMessage from '../../src/components/Form/Message';
-import { useState } from 'react';
 
 const TestControllable = () => {
     const [value, setValue] = useState('');
@@ -173,6 +173,14 @@ ReactDom.render(
                             <TestControllable />
                         </Card.Content>
                     </Card>
+                    <Card>
+                        <Card.Header title="Tags" />
+                        <Card.Content>
+                            test text
+                            <Tag variant={Variant.PRIMARY}>Primary</Tag>
+                            <Tag variant={Variant.DANGER}>Primary</Tag>
+                        </Card.Content>
+                    </Card>
                 </Row>
                 <Row>
                     <Grid columns={10} gap={4}>