Toggle

Exports

Import these components from @mbsw/ui.

Toggle

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Toggle

Toggle props
PropTypeRequirement
leadingReactNodeOptional
shape'round' | 'square'Optional
size'lg' | 'md' | 'sm'Optional
trailingReactNodeOptional
ToggleLink props
PropTypeRequirement
leadingReactNodeOptional
selectedbooleanOptional
shape'round' | 'square'Optional
size'lg' | 'md' | 'sm'Optional
trailingReactNodeOptional
asChildbooleanConditional
childrenReactNode | ReactElement<unknown, string | JSXElementConstructor<any>>Conditional
hrefstringConditional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

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>>;