@loke/design-system/dist/components/button/button.d.mts

A design system with individually importable components

import { type VariantProps } from "class-variance-authority";
import { type ButtonHTMLAttributes } from "react";
export declare const buttonVariants: (props?: ({
    justify?: "center" | "end" | "between" | "start" | null | undefined;
    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | null | undefined;
    variant?: "link" | "default" | "destructive" | "ghost" | "outline" | "secondary" | null | undefined;
    width?: "fit" | "full" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    /** When true, the component will render its children directly instead of wrapping them in a button element. This is useful for creating custom button-like components that leverage the Button styles. */
    asChild?: boolean;
}
/**
 * Button component for user interactions
 *
 * The Button component is a versatile and customizable element used for triggering actions or navigation in a user interface. It supports various visual styles and sizes to accommodate different design needs and interaction contexts.
 *
 * Key features:
 * - Multiple visual variants to convey different types of actions
 * - Size options to fit various layout requirements
 * - Support for custom styling through className prop
 * - Accessible focus states for keyboard navigation
 * - Disabled state styling
 *
 * Usage considerations:
 * - Use the appropriate variant to match the importance and context of the action
 * - Choose a size that fits well with surrounding elements and the overall layout
 * - Ensure the button's purpose is clear through its label or icon
 * - Consider using the 'asChild' prop for advanced customization scenarios
 *
 * The Button component is designed to be flexible and can be used in various contexts such as forms, dialogs, navigation menus, or as standalone call-to-action elements.
 */
declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
export { Button };