Actions

<Button onClick={() => {}}>
    Save changes
</Button>

type ButtonVariant = | "solid" | "default" | "soft" | "outline" | "ghost" | "link" | "danger" | "warning" | "success" | undefined;

<LoadingButton loading>
    Saving…
</LoadingButton>

<ConfirmButton label="Delete project" onConfirm={() => {}} />

<UnstyledButton onClick={() => {}}>
    Plain clickable text
</UnstyledButton>

<ButtonGroup label="Text alignment">
    <Button variant="outline" onClick={() => {}}>
        Left
    </Button>
    <Button variant="outline" onClick={() => {}}>
        Center
    </Button>
    <Button variant="outline" onClick={() => {}}>
        Right
    </Button>
</ButtonGroup>

function Example() {
    const strategy = signal("Merge");
    const merged = signal("");
    return (
        <Stack gap="0.5rem">
            <SplitButton
                label={strategy()}
                caretLabel="More merge options"
                onClick={() => merged.set(`${strategy()} done`)}
                menu={[
                    { label: "Merge", onSelect: () => strategy.set("Merge") },
                    { label: "Squash and merge", onSelect: () => strategy.set("Squash and merge") },
                    { label: "Rebase and merge", onSelect: () => strategy.set("Rebase and merge") },
                ]}
            />
            <Text muted>{merged() || "Pick a strategy from the caret menu."}</Text>
        </Stack>
    );
}

<ActionIcon label="Edit project" variant="subtle" onClick={() => {}}>
    <Icon name="edit" />
</ActionIcon>

<CloseButton onClick={() => {}} />

<FloatingActionButton
    label="New project"
    icon="plus"
    onClick={() => {}}
/>

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

<Group gap="0.5rem">
    <code>bun add @arachnejs/ui</code>
    <CopyButton value="bun add @arachnejs/ui" />
</Group>

<CopyId value="prj_8f3k29dz" />

<ShareButton url="https://arachne.dev/ui" title="Arachne UI" />

<CommandBar label="Selection actions">
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Archive
    </Button>
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Move
    </Button>
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Delete
    </Button>
</CommandBar>

<FloatingToolbar label="Text formatting">
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Bold
    </Button>
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Italic
    </Button>
    <Button size="sm" variant="ghost" onClick={() => {}}>
        Link
    </Button>
</FloatingToolbar>

function Example() {
    const selected = signal(3);
    return (
        <Show
            when={selected() > 0}
            fallback={
                <Button size="sm" variant="outline" onClick={() => selected.set(3)}>
                    Select 3 deploys
                </Button>
            }
        >
            <BulkBar count={selected()} onClear={() => selected.set(0)}>
                <Button size="sm" variant="outline" onClick={() => selected.set(0)}>
                    Archive
                </Button>
            </BulkBar>
        </Show>
    );
}