compote-ui/dist/components/button/button.variants.js

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 { tv } from 'tailwind-variants';
export const button = tv({
    base: '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',
    variants: {
        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'
        }
    },
    defaultVariants: { variant: 'default', size: 'default' }
});