File size: 1,156 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import { Button as Kobalte } from "@kobalte/core/button"
import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
import { Icon, type IconProps } from "./icon"
import "./button-v2.css"
export interface ButtonV2Props
extends ComponentProps<typeof Kobalte>,
Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
size?: "small" | "normal" | "large"
variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
icon?: IconProps["name"]
}
export function ButtonV2(props: ButtonV2Props) {
const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
const resolvedIcon = createMemo(() => split.icon)
return (
<Kobalte
{...rest}
data-component="button-v2"
data-size={split.size || "normal"}
data-variant={split.variant || "neutral"}
data-icon={resolvedIcon()}
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
>
<Show when={resolvedIcon()}>
<Icon name={resolvedIcon()!} />
</Show>
{props.children}
</Kobalte>
)
}
|