Button

Button covers click-to-act controls, from a primary form submit to a quiet row action or an avatar menu trigger. Variants set emphasis. Profiles handle special placements such as an icon action inside a field or a link in running text.

Install

bashnpx shadcn@4.18.0 add @siteplane/button

Import it from @/siteplane/components/button. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Toggle: Pick Toggle when the control holds an on/off pressed state. Button fires a one-time action.
• vs Copy Button: Pick Copy Button when the action writes a value to the clipboard. It handles the confirmation, the failure case and the screen reader announcement for you.
• vs Toolbar: Pick Toolbar when a row of related actions should share one tab stop and move with arrow keys.
• vs Group: Pick Group to join several buttons, or a button and an input, into one segmented frame.

Rules

• Reserve variant="accent" for the one main action on a surface. Use default, outline or ghost for the rest.
• To navigate, use render={<a href=... />} or a router link that forwards props and ref. variant="link" on its own changes the look and nothing else.
• Inside a form, set type="submit" yourself. A plain Button defaults to type="button".
• Name icon-only controls: use IconButton with label, or put aria-label on a square Button.
• loading (or LoadingButton with an async action) blocks repeat clicks during a request. Choose aria-disabled over disabled when the control must stay reachable by Tab.
• Give icon buttons inside an InputGroup (show/hide, clear, open picker) profile="field-action" and shape="square" instead of hand-styling a ghost button.

Reference

• Button docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Actions. Read the installed source under src/siteplane before relying on an API.