Button
Buttons trigger actions. This component supports kinds, sizes, icons, and standard states like hover, focus, and disabled.
Kinds
Use primary for the main action, secondary for supporting actions, and ghost for low-emphasis actions.
Sizes
Three sizes are available. Use sm for compact interfaces, md as the default, and lg for prominent calls to action.
With icon
Pass an icon component via the icon prop to display it to the left of the label.
Icon only
Use iconOnly for actions that don't need a label. Always provide an aria-label for accessibility.
Loading state
Pass a Spinner via the icon prop to indicate a loading state. The spinner inherits the button's color automatically.
Disabled
Add the disabled prop to prevent interaction. Disabled buttons retain their visual style at reduced opacity.
This demo is a work in progress. Explore the Button component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Properties
<Button> Add to greenhouse </Button>