Primary Secondary Success Info Warning Danger

<Button label="Primary" variant="primary" />
<Button label="Secondary" variant="secondary" />
<Button label="Success" variant="success" />
<Button label="Info" variant="info" />
<Button label="Warning" variant="warning" />
<Button label="Danger" variant="danger" />

Outline buttons

Primary Secondary Success Info Warning Danger

<Button label="Primary" kind="outline" variant="primary" />
<Button label="Secondary" kind="outline" variant="secondary" />
<Button label="Success" kind="outline" variant="success" />
<Button label="Info" kind="outline" variant="info" />
<Button label="Warning" kind="outline" variant="warning" />
<Button label="Danger" kind="outline" variant="danger" />

Subtle

Primary Secondary Success Info Warning Danger

<Button label="Primary" kind="subtle" variant="primary" />
<Button label="Secondary" kind="subtle" variant="secondary" />
<Button label="Success" kind="subtle" variant="success" />
<Button label="Info" kind="subtle" variant="info" />
<Button label="Warning" kind="subtle" variant="warning" />
<Button label="Danger" kind="subtle" variant="danger" />

Ghost

Primary Secondary Success Info Warning Danger

<Button label="Primary" kind="ghost" variant="primary" />
<Button label="Secondary" kind="ghost" variant="secondary" />
<Button label="Success" kind="ghost" variant="success" />
<Button label="Info" kind="ghost" variant="info" />
<Button label="Warning" kind="ghost" variant="warning" />
<Button label="Danger" kind="ghost" variant="danger" />

Link

Primary Secondary Success Info Warning Danger

<Button label="Primary" kind="link" variant="primary" />
<Button label="Secondary" kind="link" variant="secondary" />
<Button label="Success" kind="link" variant="success" />
<Button label="Info" kind="link" variant="info" />
<Button label="Warning" kind="link" variant="warning" />
<Button label="Danger" kind="link" variant="danger" />

Sizes

Button Tags

Primary Primary Primary

<Button type="button" label="Primary" variant="primary" />
<Button type="reset" label="Primary" variant="primary" />
<Button type="submit" label="Primary" variant="primary" />

Active state

Primary Primary

Disabled State

Primary Primary

Loading State

API

interface ButtonProps {
    className?: string;
    children?: React.ReactNode;
    onClick?: any;
    ref?: any;
    label?: string;
    as?: string | "a" | "button";
    variant?: string | "primary" | "secondary" | "link" | "success" | "warning" | "danger" | "info";
    kind?: string | "solid" | "outline" | "ghost" | "subtle";
    type?: string | "submit" | "button" | "reset";
    size?: string | "md";
    radius?: string | "md";
    href?: string;
    block?: boolean;
    active?: boolean;
    disabled?: boolean;
    isLoading?: boolean;

    icon?: any;
    iconPosition?: any;
}