Button

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Button

buttonVariants

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

Button

Button 속성
Prop	Type	필수 여부
`generating` Highlight-only visual state. Callers retain aria-busy, disabled and event policy.	`boolean`	선택
`tone`	`'primary' \| 'secondary' \| 'destructive' \| 'highlight'`	선택
`variant`	`'solid' \| 'outline' \| 'ghost'`	선택
`asChild`	`boolean`	조건부
`children`	`NonEmptyButtonChild \| ReactElement<unknown, string \| JSXElementConstructor<any>>`	조건부
`icon`	`IconComponent`	조건부
`iconForeground` Secondary direct icon slot only; children styling stays caller-owned.	`"primary" \| "secondary"`	조건부
`iconOnly`	`boolean`	조건부
`leadingIcon`	`IconComponent`	조건부
`size`	`'lg' \| 'md' \| 'sm' \| IconOnlyButtonSize`	선택
`trailingIcon`	`IconComponent`	조건부
`aria-label` Defines a string value that labels the current element.	`string`	조건부

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ButtonHTMLAttributes, type ElementType, type ReactElement, type ReactNode, type RefAttributes, type SVGProps } from 'react';

export type ButtonVariant = 'solid' | 'outline' | 'ghost';

export type ButtonTone = 'primary' | 'secondary' | 'destructive' | 'highlight';

export type ButtonSize = 'lg' | 'md' | 'sm';

export type IconOnlyButtonSize = ButtonSize | 'xs';

type IconComponent = ElementType<SVGProps<SVGSVGElement>>;

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type ButtonVariantOptionsBase = {
    className?: string;
    /** Highlight-only presentation; does not change interaction or aria state. */
    generating?: boolean;
    tone?: ButtonTone;
    variant?: ButtonVariant;
};

export type ButtonVariantOptions = (ButtonVariantOptionsBase & {
    iconOnly: true;
    size?: IconOnlyButtonSize;
}) | (ButtonVariantOptionsBase & {
    iconOnly?: false;
    size?: ButtonSize;
});

export declare function buttonVariants(options?: ButtonVariantOptions): string;

type ButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'size'> & DataAttributes & {
    /** Highlight-only visual state. Callers retain aria-busy, disabled and event policy. */
    generating?: boolean;
    tone?: ButtonTone;
    variant?: ButtonVariant;
};

type NonEmptyButtonChild = Exclude<ReactNode, boolean | null | undefined>;

type NativeTextButtonProps = ButtonBaseProps & {
    asChild?: false;
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: IconComponent;
    size?: ButtonSize;
    trailingIcon?: IconComponent;
};

type SlottedTextButtonProps = Omit<ButtonBaseProps, 'disabled'> & {
    asChild: true;
    children: ReactElement;
    disabled?: never;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: never;
    size?: ButtonSize;
    trailingIcon?: never;
};

type IconOnlyButtonContent = {
    children?: never;
    icon: IconComponent;
    /** Secondary direct icon slot only; children styling stays caller-owned. */
    iconForeground?: 'primary' | 'secondary';
} | {
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
};

type IconOnlyButtonProps = ButtonBaseProps & IconOnlyButtonContent & {
    'aria-label': string;
    asChild?: false;
    iconOnly: true;
    leadingIcon?: never;
    size?: IconOnlyButtonSize;
    trailingIcon?: never;
};

export type ButtonProps = (NativeTextButtonProps & RefAttributes<HTMLButtonElement>) | (SlottedTextButtonProps & RefAttributes<HTMLElement>) | (IconOnlyButtonProps & RefAttributes<HTMLButtonElement>);

type ButtonComponent = {
    (props: ButtonProps): ReactElement | null;
    displayName?: string;
};

export declare const Button: ButtonComponent;