Create test design

webui/src/common/components/Button/Button.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import cn from "classnames";
+import "./styles.sass";
+
+/*
+Props:
+- variant: primary | subtle | danger
+- size: sm | md | lg
+- full: boolean (full width)
+- icon: ReactNode (left icon)
+- iconRight: ReactNode (right icon)
+- loading: boolean
+*/
+
+export const Button = ({
+  as: Component = "button",
+  variant = "primary",
+  size = "md",
+  full = false,
+  icon,
+  iconRight,
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+  return (
+    <Component
+      className={cn(
+        "btn",
+        `btn--${variant}`,
+        `btn--${size}`,
+        full && "btn--full",
+        loading && "is-loading",
+        className
+      )}
+      disabled={isDisabled}
+      {...rest}
+    >
+      {loading && <span className="btn__spinner" aria-hidden />}
+      {icon && <span className="btn__icon btn__icon--left">{icon}</span>}
+      <span className="btn__label">{children}</span>
+      {iconRight && <span className="btn__icon btn__icon--right">{iconRight}</span>}
+    </Component>
+  );
+};
+
+export default Button;

webui/src/common/components/Button/index.js

@@ -0,0 +1 @@
+export { Button as default } from "./Button.jsx";

webui/src/common/components/Button/styles.sass

@@ -0,0 +1,84 @@
+.btn
+  --c-bg: #ffffff
+  --c-bg-hover: #f2f5f8
+  --c-bg-active: #e6ebf0
+  --c-border: #d0d7de
+  --c-border-hover: #c2cbd3
+  --c-text: #1f2429
+  --c-accent: #0f62fe
+  --c-danger: #d93025
+  position: relative
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  gap: .5rem
+  font-family: inherit
+  font-weight: 500
+  line-height: 1.2
+  cursor: pointer
+  border: 1px solid var(--c-border)
+  background: var(--c-bg)
+  color: var(--c-text)
+  border-radius: 6px
+  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
+  user-select: none
+  text-decoration: none
+  &:hover:not(:disabled)
+    background: var(--c-bg-hover)
+    border-color: var(--c-border-hover)
+  &:active:not(:disabled)
+    background: var(--c-bg-active)
+  &:focus-visible
+    outline: 2px solid var(--c-accent)
+    outline-offset: 2px
+  &:disabled
+    opacity: .55
+    cursor: not-allowed
+  &.btn--full
+    width: 100%
+  &.btn--sm
+    font-size: .75rem
+    padding: .4rem .7rem
+  &.btn--md
+    font-size: .85rem
+    padding: .6rem 1rem
+  &.btn--lg
+    font-size: 1rem
+    padding: .8rem 1.2rem
+  &.btn--primary
+    --c-bg: #0f62fe
+    --c-bg-hover: #0d55dd
+    --c-bg-active: #0b47b8
+    --c-border: #0f62fe
+    --c-text: #ffffff
+  &.btn--subtle
+    --c-bg: #f3f6f9
+    --c-bg-hover: #e8edf2
+    --c-bg-active: #dfe5eb
+    --c-border: #e1e6eb
+  &.btn--danger
+    --c-bg: #d93025
+    --c-bg-hover: #c22b21
+    --c-bg-active: #a9241b
+    --c-border: #d93025
+    --c-text: #ffffff
+
+.btn__icon
+  display: inline-flex
+  align-items: center
+  &--left
+    margin-right: .25rem
+  &--right
+    margin-left: .25rem
+
+.btn__spinner
+  width: 14px
+  height: 14px
+  border: 2px solid rgba(0,0,0,.15)
+  border-top-color: var(--c-text)
+  border-radius: 50%
+  animation: spin .7s linear infinite
+
+@keyframes spin
+  to
+    transform: rotate(360deg)