useButton

The useButton hook implements interactivity and accessibility for a Button.

Arguments

The useButton hook takes in the following arguments:

Argument	Description
`plasmicClass`	The generated `Plasmic*` class for your designed component
`props`	props for your component, which extends from PlumeButtonProps
`config`	PlumeButton Configuration for this component
`ref`	Instance of PlumeButtonRef providing programmatic access

Return value

The useButton hook returns an object with these keys:

Key	Description
`plumeProps`	Props to spread onto your `Plasmic*` component

Plume Config

Key	Description	Required?
`isDisabledVariant`	Variant to activate when the Button is disabled, according to `props.isDisabled`	Recommended
`showStartIconVariant`	Variant to activate to show the Button with a start icon, which happens whenever `props.startIcon` is specified.	Optional
`showEndIconVariant`	Variant to actuvate to show the Button with an end icon, which happens whenever `props.endIcon` is specified.	Optional
`contentSlot`	Slot name for the Button text; will be filled with `props.children`	Required
`startIconSlot`	Slot name for the start icon slot; will be filled with `props.startIcon`	Optional
`endIconSlot`	Slot name for the end icon slot; will be filled with `props.endIcon`	Optional
`root`	Name 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