33 lines · 1002 B · TypeScript
RawDownload
import { Button as Kobalte } from "@kobalte/core/button"import { type ComponentProps, Show, splitProps } from "solid-js"import { Icon, IconProps } from "./icon" export interface ButtonProps  extends ComponentProps<typeof Kobalte>,    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {  size?: "small" | "normal" | "large"  variant?: "primary" | "secondary" | "ghost"  icon?: IconProps["name"]} export function Button(props: ButtonProps) {  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])  return (    <Kobalte      {...rest}      data-component="button"      data-size={split.size || "normal"}      data-variant={split.variant || "secondary"}      data-icon={split.icon}      classList={{        ...(split.classList ?? {}),        [split.class ?? ""]: !!split.class,      }}    >      <Show when={split.icon}>        <Icon name={split.icon!} size="small" />      </Show>      {props.children}    </Kobalte>  )}