1 files changed, 27 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
new file mode 100644
index 000000000..4f9f56f12
--- /dev/null
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -0,0 +1,27 @@
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
+
+export interface CircleProps {
+    diameter: number;
+    rawColor?: string;
+    color?: ColorOption;
+    theme: Theme;
+}
+
+export const Circle = withTheme(
+    styled.div <
+        CircleProps >
+        `
+    && {
+        width: ${props => props.diameter}px;
+        height: ${props => props.diameter}px;
+        background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
+        border-radius: 50%;
+    }
+`,
+);
+
+Circle.displayName = 'Circle';
+
+Circle.defaultProps = {
+    color: ColorOption.white,
+};