pdsls.dev
1import { JSX } from "solid-js";
2
3export interface ButtonProps {
4 type?: "button" | "submit" | "reset" | "menu" | undefined;
5 disabled?: boolean;
6 class?: string;
7 classList?: Record<string, boolean | undefined>;
8 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
9 children?: JSX.Element;
10}
11
12export const Button = (props: ButtonProps) => {
13 return (
14 <button
15 type={props.type ?? "button"}
16 disabled={props.disabled ?? false}
17 class={
18 props.class ??
19 "dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
20 }
21 classList={props.classList}
22 onClick={props.onClick}
23 >
24 {props.children}
25 </button>
26 );
27};