Toggle
Exports
Import these components from @mbsw/ui.
ToggleToggleLinkProps
The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.
Toggle
| Prop | Type | Requirement |
|---|---|---|
leading | ReactNode | Optional |
shape | 'round' | 'square' | Optional |
size | 'lg' | 'md' | 'sm' | Optional |
trailing | ReactNode | Optional |
ToggleLink
| Prop | Type | Requirement |
|---|---|---|
leading | ReactNode | Optional |
selected | boolean | Optional |
shape | 'round' | 'square' | Optional |
size | 'lg' | 'md' | 'sm' | Optional |
trailing | ReactNode | Optional |
asChild | boolean | Conditional |
children | ReactNode | ReactElement<unknown, string | JSXElementConstructor<any>> | Conditional |
href | string | Conditional |
Type reference
Show full types
Full TypeScript definitions, including prop combinations and inherited props.
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>>;