Props#

ToggleButton props#

PropTypeDefaultDescription
autoFocusbooleanWhether the element should receive focus on render.
childrenstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The content to display in the button.
defaultSelectedbooleanWhether the element should be selected (uncontrolled).
isDisabledbooleanWhether the button is disabled.
isSelectedbooleanWhether the element should be selected (controlled).
onBlur(e: FocusEvent<Element, Element>) => voidHandler that is called when the element loses focus.
onChange(isSelected: boolean) => voidHandler that is called when the element's selection state changes.
onFocus(e: FocusEvent<Element, Element>) => voidHandler that is called when the element receives focus.
onFocusChange(isFocused: boolean) => voidHandler that is called when the element's focus status changes.
onKeyDown(e: KeyboardEvent) => voidHandler that is called when a key is pressed.
onKeyUp(e: KeyboardEvent) => voidHandler that is called when a key is released.
onPress(e: PressEvent) => voidHandler that is called when the press is released over the target.
onPressChange(isPressed: boolean) => voidHandler that is called when the press state changes.
onPressEnd(e: PressEvent) => voidHandler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart(e: PressEvent) => voidHandler that is called when a press interaction starts.
onPressUp(e: PressEvent) => voidHandler that is called when a press is released over the target, regardless of whether it started on the target or not.

ToggleButtonGroup props#

PropTypeDefaultDescription
defaultValueTType extends "checkbox" ? TValue[] : TValue
isAttachedbooleanfalseIf true, the borderRadius of button that are direct children will be altered to look flushed together
isDisabledbooleanfalseIf true, all wrapped button will be disabled
onChange( value: TType extends "checkbox" ? TValue[] : TValue, ) => void
spacingResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | ... 54 more ... | "-3.5">'0.5rem'The spacing between the buttons
typeTType
valueTType extends "checkbox" ? TValue[] : TValue

Was this helpful?