pds.ls
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 ontouchstart?: (e: TouchEvent) => void;
10 children?: JSX.Element;
11}
12
13export const Button = (props: ButtonProps) => {
14 return (
15 <button
16 type={props.type ?? "button"}
17 disabled={props.disabled ?? false}
18 class={
19 props.class ??
20 "dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 flex items-center gap-1 rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
21 }
22 classList={props.classList}
23 onClick={props.onClick}
24 ontouchstart={props.ontouchstart}
25 >
26 {props.children}
27 </button>
28 );
29};