compote-ui/dist/components/button/button.variants.d.ts

An opinionated UI component library for Svelte, built on top of [Ark UI](https://ark-ui.com) with additional components and features not available in the core Ark UI library.

import { type VariantProps } from 'tailwind-variants';
export declare const button: import("tailwind-variants").TVReturnType<{
    variant: {
        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
        outline: "border text-ink hover:bg-surface-2";
        ghost: "text-ink hover:bg-surface-2";
        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
    };
    size: {
        sm: "h-8 gap-1.5 px-2";
        default: "h-9 gap-2 px-3";
        lg: "h-10 gap-2.5 px-4";
        icon: "size-8";
        'icon-xs': "size-6";
        'icon-sm': "size-7";
        'icon-lg': "size-9";
    };
}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", {
    variant: {
        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
        outline: "border text-ink hover:bg-surface-2";
        ghost: "text-ink hover:bg-surface-2";
        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
    };
    size: {
        sm: "h-8 gap-1.5 px-2";
        default: "h-9 gap-2 px-3";
        lg: "h-10 gap-2.5 px-4";
        icon: "size-8";
        'icon-xs': "size-6";
        'icon-sm': "size-7";
        'icon-lg': "size-9";
    };
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
    variant: {
        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
        outline: "border text-ink hover:bg-surface-2";
        ghost: "text-ink hover:bg-surface-2";
        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
    };
    size: {
        sm: "h-8 gap-1.5 px-2";
        default: "h-9 gap-2 px-3";
        lg: "h-10 gap-2.5 px-4";
        icon: "size-8";
        'icon-xs': "size-6";
        'icon-sm': "size-7";
        'icon-lg': "size-9";
    };
}, undefined>>;
export type ButtonVariant = VariantProps<typeof button>['variant'];
export type ButtonSize = VariantProps<typeof button>['size'];