useButton

The useButton hook implements interactivity and accessibility for a Button.

Arguments

The useButton hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeButtonProps
configPlumeButton Configuration for this component
refInstance of PlumeButtonRef providing programmatic access

Return value

The useButton hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component

Plume Config

KeyDescriptionRequired?
isDisabledVariantVariant to activate when the Button is disabled, according to props.isDisabledRecommended
showStartIconVariantVariant to activate to show the Button with a start icon, which happens whenever props.startIcon is specified.Optional
showEndIconVariantVariant to actuvate to show the Button with an end icon, which happens whenever props.endIcon is specified.Optional
contentSlotSlot name for the Button text; will be filled with props.childrenRequired
startIconSlotSlot name for the start icon slot; will be filled with props.startIconOptional
endIconSlotSlot name for the end icon slot; will be filled with props.endIconOptional
rootName of the root element of the component; will be rendered as button tag and have hover and pressing event handlers attached.Required

Example

interface ButtonProps extends PlumeButtonProps {

}
function Button_(
  props: ButtonProps,
  ref: PlumeButtonRef
) {
  const {plumeProps} = useButton(
    PlasmicButton,
    props,
    {
      isDisabledVariant: ["state", "isDisabled"],
      showStartIconVariant: ["withIcons", "start"],
      showEndIconVariant: ["withIcons", "start"],

      startIconSlot: "startIcon",
      endIconSlot: "endIcon",
      contentSlot: "children",

      root: "root"
    },
    ref
  );
  return <PlumeButton {...plumeProps} />;
}

const Button = React.forwardRef(Button_);
export default Button;

React-Aria

Implemented using useButton