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