Function ToggleButton

starters/hooks/src/ToggleButton.tsx:19–42

({variant = 'primary', ...props}: ToggleButtonProps)

}

export function ToggleButton({variant = 'primary', ...props}: ToggleButtonProps) {
  let ref = useRef<HTMLButtonElement>(null);
  let state = useToggleState(props);
  /*- begin highlight -*/
  let {buttonProps, isPressed} = useToggleButton(props, state, ref);
  /*- end highlight -*/
  let {hoverProps, isHovered} = useHover(props);
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <button
      {...mergeProps(buttonProps, hoverProps, focusProps)}
      ref={ref}
      className="react-aria-ToggleButton button-base"
      data-variant={variant}
      data-selected={state.isSelected || undefined}
      data-pressed={isPressed || undefined}
      data-hovered={isHovered || undefined}
      data-focus-visible={isFocusVisible || undefined}
      data-disabled={props.isDisabled || undefined}>
      <span>{props.children}</span>
    </button>
  );
}