demo/acme-web code browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import type { ButtonHTMLAttributes } from "react";
import { color, radius, space } from "./tokens";

type Props = ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "primary" | "secondary" };

export function Button({ variant = "primary", style, ...rest }: Props) {
  const primary = variant === "primary";
  return (
    <button
      {...rest}
      style={{
        padding: space.sm + "px " + space.lg + "px",
        borderRadius: radius,
        border: "1px solid " + (primary ? color.accent : color.line),
        background: primary ? color.accent : color.surface,
        color: primary ? "#fff" : color.ink,
        opacity: rest.disabled ? 0.5 : 1,
        ...style,
      }}
    />
  );
}