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> )}
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>
)
}