The Button component implements a simple pressable button that can be further decorated with a starting or ending icon.


This is just an example Button component, designed in the Plain Kit project. You have total freedom to design Plume components exactly as you'd want them to be, with your own unique variants and behaviors.

Switch to a different kit:

Plain Kit

Basic Button

Button with Start Icon

Button with End Icon

Button Props

childrenReact.ReactNodeContent of the Button
startIconReact.ReactNodeIcon to render at start of the Button
endIconReact.ReactNodeIcon to render at end of the Button
isDisabledbooleanWhether the Button is disabled
elementTypeReact.ElementTypeBy default, the root is rendered as a button; you can render it as a different element type instead
hrefstringLink URL to use if elementType is a
targetstringLink target to use if elementType is a
refPlumeButtonRefProgrammatic access to Button


focus()Focuses this button
UNSAFE_getDOMNode()Returns the root DOM element

Build your own!

Build your own Button, designed in Plasmic, with the useButton hook!