franken-ui/dist/shadcn-ui/components/button.d.ts

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

export default function (): {
    'hook-button': {
        margin: null;
        border: null;
        overflow: null;
        font: null;
        color: null;
        textTransform: null;
        WebkitAppearance: null;
        borderRadius: null;
        display: null;
        boxSizing: null;
        padding: null;
        verticalAlign: null;
        fontSize: null;
        lineHeight: null;
        textAlign: null;
        textDecoration: null;
        '@apply inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring': {};
    };
    'hook-disabled': {
        backgroundColor: null;
        color: null;
        borderColor: null;
        '@apply opacity-50': {};
    };
    'hook-default': {
        backgroundColor: null;
        color: null;
        border: null;
        '@apply border border-input bg-background text-accent-foreground': {};
    };
    'hook-default-hover': {
        backgroundColor: null;
        color: null;
        borderColor: null;
        '@apply bg-accent': {};
    };
    'hook-default-active': {
        backgroundColor: null;
        color: null;
        borderColor: null;
    };
    'hook-primary': {
        backgroundColor: null;
        color: null;
        '@apply bg-primary text-primary-foreground': {};
    };
    'hook-primary-hover': {
        backgroundColor: null;
        color: null;
        '@apply opacity-90': {};
    };
    'hook-primary-active': {
        backgroundColor: null;
        color: null;
    };
    'hook-secondary': {
        backgroundColor: null;
        color: null;
        '@apply bg-secondary text-secondary-foreground': {};
    };
    'hook-secondary-hover': {
        backgroundColor: null;
        color: null;
        '@apply opacity-90': {};
    };
    'hook-secondary-active': {
        backgroundColor: null;
        color: null;
    };
    'hook-danger': {
        backgroundColor: null;
        color: null;
        '@apply bg-destructive text-destructive-foreground': {};
    };
    'hook-danger-hover': {
        backgroundColor: null;
        color: null;
        '@apply opacity-90': {};
    };
    'hook-danger-active': {
        backgroundColor: null;
        color: null;
    };
    'hook-link': {
        color: null;
        lineHeight: null;
        '@apply h-auto rounded-none shadow-none': {};
    };
    'hook-link-hover': {
        color: null;
    };
    'hook-link-disabled': {
        color: null;
        '@apply opacity-50': {};
    };
    'hook-text': {
        color: null;
        lineHeight: null;
        '@apply h-auto rounded-none shadow-none': {};
    };
    'hook-text-hover': {
        color: null;
    };
    'hook-text-disabled': {
        color: null;
        '@apply opacity-50': {};
    };
    'hook-small': {
        padding: null;
        lineHeight: null;
        fontSize: null;
        '@apply h-8 px-3 py-0 text-xs': {};
    };
    'hook-large': {};
    'hook-misc': {
        '.uk-button-large': null;
        '.uk-button-group': null;
        '.uk-button-group > .uk-button:nth-child(n + 2), .uk-button-group > div:nth-child(n + 2) .uk-button': null;
        '.uk-button-group .uk-button:hover, .uk-button-group .uk-button:focus, .uk-button-group .uk-button:active, .uk-button-group .uk-button.uk-active': null;
        '.uk-button-ghost': {
            '@apply shadow-none': {};
        };
        '.uk-button-ghost:hover': {
            '@apply bg-accent': {};
        };
        '.uk-button-xsmall': {
            '@apply h-7 px-3 py-0 text-xs': {};
        };
    };
};