Solid UI Neobrutalism

1
import { Button } from "~/components/ui/button";
2

3
export default function ButtonDemo() {
4
  return (
5
    <div class="flex flex-wrap gap-4">
6
      <Button>Default</Button>
7
      <Button variant="no-shadow">No Shadow</Button>
8
      <Button variant="outline">Outline</Button>
9
      <Button variant="outline-no-shadow">Outline No Shadow</Button>
10
      <Button variant="ghost">Ghost</Button>
11
      <Button variant="neutral">Neutral</Button>
12
      <Button variant="neutral-no-shadow">Neutral No Shadow</Button>
13
      <Button variant="reverse">Reverse</Button>
14
      <Button variant="link">Link</Button>
15
      <Button variant="success">Success</Button>
16
      <Button variant="warning">Warning</Button>
17
      <Button variant="error">Error</Button>
18
      <Button variant="info">Info</Button>
19
    </div>
20
  );
21
}

Installation#

Install the following dependencies

Copy and paste the following code into your project

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { VariantProps } from "class-variance-authority";
3
import type { JSX, ValidComponent } from "solid-js";
4

5
import { splitProps } from "solid-js";
6
import * as ButtonPrimitive from "@kobalte/core/button";
7
import { cva } from "class-variance-authority";
8

9
import { cn } from "~/lib/utils";
10

11
const buttonVariants = cva(
12
  "inline-flex items-center justify-center gap-2 rounded-base text-sm font-base whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
13
  {
14
    variants: {
15
      variant: {
16
        default:
17
          "border-2 border-border bg-primary text-primary-foreground shadow-shadow active:translate-x-box-shadow-x active:translate-y-box-shadow-y active:shadow-none",
18
        outline:
19
          "border-2 border-border bg-transparent text-foreground shadow-shadow active:translate-x-box-shadow-x active:translate-y-box-shadow-y active:shadow-none",
20
        "outline-no-shadow":
21
          "border-2 border-border bg-transparent text-foreground hover:bg-secondary-background/50",
22
        ghost:
23
          "bg-transparent text-foreground hover:bg-secondary-background/50",
24
        "no-shadow":
25
          "border-2 border-border bg-primary text-primary-foreground hover:bg-primary/80",
26
        neutral:
27
          "border-2 border-black bg-secondary-background text-foreground shadow-destructive active:translate-x-box-shadow-x active:translate-y-box-shadow-y active:shadow-none",
28
        "neutral-no-shadow":
29
          "border-2 border-border bg-secondary-background text-foreground hover:bg-secondary-background/80",
30
        reverse:
31
          "border-2 border-border bg-primary text-primary-foreground active:translate-x-reverse-box-shadow-x active:translate-y-reverse-box-shadow-y active:shadow-shadow",
32
        link: "text-foreground underline-offset-4 hover:underline",
33
        success:
34
          "border-2 border-success-foreground bg-success text-success-foreground hover:bg-success/50",
35
        info: "border-2 border-info-foreground bg-info text-info-foreground hover:bg-info/50",
36
        warning:
37
          "border-2 border-warning-foreground bg-warning text-warning-foreground hover:bg-warning/50",
38
        error:
39
          "border-2 border-error-foreground bg-error text-error-foreground hover:bg-error/50",
40
      },
41
      size: {
42
        default: "h-10 px-4 py-2",
43
        xs: "h-8 px-2 text-xs",
44
        sm: "h-9 px-3 text-xs",
45
        lg: "h-11 px-8",
46
        xl: "h-12 px-10 text-lg",
47
        icon: "size-10",
48
      },
49
    },
50
    defaultVariants: {
51
      variant: "default",
52
      size: "default",
53
    },
54
  },
55
);
56

57
type ButtonProps<T extends ValidComponent = "button"> =
58
  ButtonPrimitive.ButtonRootProps<T> &
59
    VariantProps<typeof buttonVariants> & {
60
      class?: string | undefined;
61
      children?: JSX.Element;
62
    };
63

64
const Button = <T extends ValidComponent = "button">(
65
  props: PolymorphicProps<T, ButtonProps<T>>,
66
) => {
67
  const [local, others] = splitProps(props as ButtonProps, [
68
    "variant",
69
    "size",
70
    "class",
71
  ]);
72
  return (
73
    <ButtonPrimitive.Root
74
      data-slot="button"
75
      class={cn(
76
        buttonVariants({ variant: local.variant, size: local.size }),
77
        local.class,
78
      )}
79
      {...others}
80
    />
81
  );
82
};
83

84
export { Button, buttonVariants };
85
export type { ButtonProps };

Update the import paths to match your project setup.

Usage#

1
import { Button } from "~/components/ui/button";

1
<Button>Button</Button>

Link#

You can use the as prop to make another component look like a button. Here’s an example of a link that looks like a button:

1
import { CustomLink } from "~/components/custom-link";
2
import { Button } from "~/components/ui/button";
3

4
export function LinkAsButton() {
5
  return (
6
    <div>
7
      <Button
8
        as="a"
9
        href="https://github.com/pekochan069/solid-ui-neobrutalism"
10
      >
11
        Go to GitHub
12
      </Button>
13
      <Button
14
        as={CustomLink}
15
        href="https://github.com/pekochan069/solid-ui-neobrutalism"
16
        customProp="customValue"
17
      >
18
        Custom Link Button
19
      </Button>
20
    </div>
21
  );
22
}