@stanfordspezi/spezi-web-design-system/dist/src/components/Button/Button.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
export declare const buttonVariants: {
    /**
     * Controls the visual variant of the button.
     * - `default`: filled with primary color.
     *   Should be used for indicating primary action.
     * - `secondary`: filled with secondary color.
     *   Should be used for indicating secondary action.
     * - `outline`: bordered, transparent fill.
     *    Can be used for additional controls, icon buttons.
     * - `outlineBg`: bordered, filled with default surface background.
     * - `ghost`: no styled applied, unless hovered.
     *   Can be used for additional controls, icon buttons.
     * - `ghostPrimary`: primary color, with `ghost` styles on hover.
     *   Can be used for additional controls, icon buttons.
     * - `success`: filled with success color.
     *    Should be used for indicating positive actions.
     * - `destructive`: filled with destructive color.
     *    Should be used for indicating negative and destructive actions.
     * - `link`: just a regular text with underline on hover.
     *
     * @default "default"
     */
    variant: {
        default: string;
        secondary: string;
        outline: string;
        outlineBg: string;
        ghost: string;
        ghostPrimary: string;
        success: string;
        destructive: string;
        link: string;
    };
    /**
     * Affects height, font size, padding, radius and gap.
     * - `xs`
     * - `sm`
     * - `default`
     * - `lg`
     * - `round`: useful for round buttons with icons.
     *   No size or padding applied, provide through className.
     *
     * @default "default"
     */
    size: {
        xs: string;
        sm: string;
        default: string;
        lg: string;
        round: string;
    };
};
export declare const buttonVariance: (props?: ({
    variant?: "link" | "default" | "secondary" | "success" | "destructive" | "outline" | "outlineBg" | "ghost" | "ghostPrimary" | null | undefined;
    size?: "default" | "sm" | "lg" | "xs" | "round" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface ButtonProps extends ComponentProps<"button">, VariantProps<typeof buttonVariance> {
    asChild?: AsChildProp;
    /**
     * Shows loader over button, maintaining its width.
     * Use for visualizing mutation or form submission loading states.
     *
     * @default undefined
     */
    isPending?: boolean;
}
/**
 * Button component for user interactions with multiple style variants and sizes.
 *
 * Can render as other elements via {@link ButtonProps#asChild|asChild} prop to apply button styles to custom components.
 * Supports loading state through {@link ButtonProps#isPending|isPending} prop.
 *
 * @example
 * ```tsx
 * // Default primary button
 * <Button>Click me</Button>
 * ```
 *
 * @example
 * ```tsx
 * // Secondary loading button
 * <Button variant="secondary" isPending>Something</Button>
 * ```
 *
 * @example
 * ```tsx
 * // Link styled as a button
 * <Button asChild>
 *   <a href="/somewhere">Visit</a>
 * </Button>
 * ```
 */
export declare const Button: ({ className, variant, size, asChild, type, isPending, children, ...props }: ButtonProps) => import("react").JSX.Element;