Browserbase Logo

1interface LogoProps {
2  className?: string;
3  variant?: "icon" | "wordmark";
4  mode?: "dark" | "light";
5}
6 
7const COLORS = {
8  dark: "#FFFFFF",
9  light: "#100D0D",
10};
11 
12export function BrowserbaseLogo({
13  className,
14  variant = "icon",
15  mode = "dark",
16}: LogoProps) {
17  const color = COLORS[mode];
18 
19  if (variant === "wordmark") {
20    return (
21      <svg
22        role="img"
23        viewBox="0 0 200 32"
24        fill="none"
25        xmlns="http://www.w3.org/2000/svg"
26        className={className}
27      >
28        <title>Browserbase</title>
29        <path
30          fillRule="evenodd"
31          clipRule="evenodd"
32          d="M30.788 0.96H0.708047V31.04H30.788V0.96ZM-0.251953 0V32H31.748V0H-0.251953Z"
33          fill={color}
34        />
35        <path
36          d="M8.5 8H15.5C17.433 8 19 9.567 19 11.5C19 12.617 18.468 13.608 17.646 14.25C18.715 14.82 19.5 15.966 19.5 17.25C19.5 19.32 17.82 21 15.75 21H8.5V8ZM10.5 13.5H15C15.828 13.5 16.5 12.828 16.5 12C16.5 11.172 15.828 10.5 15 10.5H10.5V13.5ZM10.5 18.5H15.25C16.216 18.5 17 17.716 17 16.75C17 15.784 16.216 15 15.25 15H10.5V18.5Z"
37          fill={color}
38        />
39        <path
40          d="M45.5 10C42.467 10 40 12.467 40 15.5C40 18.533 42.467 21 45.5 21C47.12 21 48.574 20.304 49.6 19.2V21H51.5V10.2H49.6V11.8C48.574 10.696 47.12 10 45.5 10ZM45.5 19C43.567 19 42 17.433 42 15.5C42 13.567 43.567 12 45.5 12C47.433 12 49 13.567 49 15.5C49 17.433 47.433 19 45.5 19Z"
41          fill={color}
42        />
43        <path
44          d="M57 10.2V12.4C57.8 11.0 59.1 10.2 60.8 10.2V12.2C58.7 12.2 57 13.5 57 16V21H55V10.2H57Z"
45          fill={color}
46        />
47        <path
48          d="M70 10C66.967 10 64.5 12.467 64.5 15.5C64.5 18.533 66.967 21 70 21C71.82 21 73.44 20.12 74.46 18.76L72.9 17.7C72.24 18.52 71.18 19 70 19C68.3 19 66.86 17.94 66.32 16.44H75.1C75.16 16.14 75.2 15.82 75.2 15.5C75.2 12.467 72.733 10 70 10ZM66.28 14.56C66.78 13.0 68.26 12 70 12C71.74 12 73.22 13.0 73.72 14.56H66.28Z"
49          fill={color}
50        />
51        <path
52          d="M84.5 10C82.88 10 81.42 10.696 80.4 11.8V10.2H78.5V24H80.4V19.2C81.42 20.304 82.88 21 84.5 21C87.533 21 90 18.533 90 15.5C90 12.467 87.533 10 84.5 10ZM84.5 19C82.567 19 81 17.433 81 15.5C81 13.567 82.567 12 84.5 12C86.433 12 88 13.567 88 15.5C88 17.433 86.433 19 84.5 19Z"
53          fill={color}
54        />
55        <path
56// … truncated