ComponentsForms
Button
Trigger an action or event with a clickable button.
Overview
Use a button to trigger an action or event — submitting a form, opening a dialog, or confirming a choice. It ships with six variants and a range of sizes.
$ npx morpha-ui add buttonExamples
Variants
Sizes
With icon
Disabled
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add button. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add buttonAPI Reference
Accessibility
- Renders a native
<button>, so keyboard activation and focus handling come for free. - Icon-only buttons must provide an
aria-labeldescribing the action. - Place icons with
data-icon="inline-start"/data-icon="inline-end"— the component handles their sizing. - A visible focus ring is provided via
focus-visible.