Init

1 files changed, 61 insertions, 0 deletions

diff --git a/src/ui/objects/ActionButton.tsx b/src/ui/objects/ActionButton.tsx
new file mode 100644
index 0000000..76f859f
--- /dev/null
+++ b/src/ui/objects/ActionButton.tsx
@@ -0,0 +1,61 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "label-as"?: string;
+        "pill"?: boolean;
+        "icon"?: JSX.Element;
+        "pre"?: JSX.Element;
+        "post"?: JSX.Element;
+        "highlighted"?: boolean;
+        "selected"?: boolean;
+        "wide"?: boolean;
+        "justify"?: boolean;
+        "align-block"?: boolean;
+        "level"?: "button" | "badge" | "quiet";
+        "variant"?: "accent" | "positive" | "negative" | "warning" | "static-black" | "static-white";
+        "size"?: "xs" | "sm" | "lg" | "xl";
+        "children"?: JSX.Element;
+}>;
+
+export const ActionButton = <T extends HTMLTag = "a">({
+        children,
+        as: Tag = "a" as T,
+        "label-as": Label = "span",
+        pill,
+        pre,
+        post,
+        wide,
+        justify,
+        icon,
+        "align-block": alignBlock,
+        highlighted,
+        selected,
+        level,
+        variant,
+        size,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-button",
+                        {
+                                "o-button--pill": pill,
+                                "o-button--wide": wide,
+                                "o-button--justify": justify,
+                                "o-button--icon": icon,
+                                "o-button--align-block": alignBlock,
+                                "is-highlighted": highlighted,
+                                "is-selected": selected,
+                                [`o-button--${level}`]: level && level !== "button",
+                                [`o-button--${variant}`]: variant,
+                                [`o-button--${size}`]: size,
+                        },
+                        cls,
+                ]}
+                {...props}
+        >
+                {pre} {icon ?? <Label class="o-button__label">{children}</Label>} {post}
+        </Tag>
+);