Toggle

Exports

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

Toggle

Props

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

Toggle

Toggle 속성
PropType필수 여부
leadingReactNode선택
shape'round' | 'square'선택
size'lg' | 'md' | 'sm'선택
trailingReactNode선택
ToggleLink 속성
PropType필수 여부
leadingReactNode선택
selectedboolean선택
shape'round' | 'square'선택
size'lg' | 'md' | 'sm'선택
trailingReactNode선택
asChildboolean조건부
childrenReactNode | ReactElement<unknown, string | JSXElementConstructor<any>>조건부
hrefstring조건부

Type reference

전체 타입 보기

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

import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';

import { Toggle as TogglePrimitive } from 'radix-ui';

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

export type ToggleShape = 'round' | 'square';

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

type TogglePrimitiveProps = ComponentPropsWithoutRef<typeof TogglePrimitive.Root>;

export type ToggleProps = Omit<TogglePrimitiveProps, 'asChild' | 'color'> & DataAttributes & {
    leading?: ReactNode;
    shape?: ToggleShape;
    size?: ToggleSize;
    trailing?: ReactNode;
};

type ToggleLinkForbiddenProps = {
    'aria-disabled'?: never;
    'aria-pressed'?: never;
    defaultPressed?: never;
    disabled?: never;
    onPressedChange?: never;
    pressed?: never;
};

type ToggleLinkBaseProps = Omit<ComponentPropsWithoutRef<'a'>, 'aria-disabled' | 'aria-pressed' | 'children' | 'color' | 'href'> & DataAttributes & ToggleLinkForbiddenProps & {
    leading?: ReactNode;
    selected?: boolean;
    shape?: ToggleShape;
    size?: ToggleSize;
    trailing?: ReactNode;
};

type NativeToggleLinkProps = ToggleLinkBaseProps & {
    asChild?: false;
    children?: ReactNode;
    href: string;
};

type SlottedToggleLinkProps = ToggleLinkBaseProps & {
    asChild: true;
    children: ReactElement;
    href?: never;
};

export type ToggleLinkProps = NativeToggleLinkProps | SlottedToggleLinkProps;

export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<TogglePrimitive.ToggleProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "color" | "asChild"> & DataAttributes & {
    leading?: ReactNode;
    shape?: ToggleShape;
    size?: ToggleSize;
    trailing?: ReactNode;
} & import("react").RefAttributes<HTMLButtonElement>>;

export declare const ToggleLink: import("react").ForwardRefExoticComponent<ToggleLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;