+
+
+
+
+ Per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/), a
+ button is a widget that enables users to trigger an action or event,
+ such as submitting a form, opening a dialog, canceling an action, or
+ performing a delete operation.
+
+
+
+ Consider if you want a button that
+ triggers navigation to a URL.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {sections.whenToUse.title}
+
+ Primary Actions: Use buttons for primary actions
+ that users need to take, such as submitting a form, saving changes,
+ or proceeding to the next step.
+
+
+
+ Call to Action (CTA): Buttons are ideal for CTAs
+ that encourage users to take a specific action, like "Sign Up,"
+ "Buy Now," or "Learn More."
+
+
+
+
+
+ Standard styling options for the button control are found below, in
+ order of usage from least to most prominent. Consider the indented
+ context before employing an appearance variant.
+
+
+
+ {sections.sizing.title}
+
+ Nimble Buttons are currently always 32px tall. Designs exist for
+ other sizes; if you need these in an application, please comment on
+ [Configurable height for nimble controls (#610)](https://github.com/ni/nimble/issues/610).
+
+ {sections.spacingWithOtherComponents.title}
+
+ Use consistent spacing between elements to keep layouts clean and
+ organized. Adequate padding around components prevents visual
+ clutter and helps users focus on key information. Use responsive
+ spacing when layouts change across screen sizes.
+
+
+
+
+
+
+ Cancel
+ Save
+
+ }
+ >
+ Use one visually prominent action per section and pair it with
+ less prominent actions when users need a clear hierarchy.
+
+
+ Save
+ Submit
+
+ }
+ >
+ Do not use multiple visually prominent buttons together when
+ one action should take priority.
+
+
+ Save Changes
+
+ }
+ >
+ Use concise labels that describe the action the button performs.
+
+
+ Click Here
+
+ }
+ >
+ Avoid vague labels that do not tell users what will happen when
+ the button is activated.
+
+
+
+
+
+
+
+
+ {sections.keyboardUsage.title}
+
+ Buttons must remain keyboard accessible so users can move focus
+ to them and activate them with standard keyboard controls.
+
+
+
+
+
+ {sections.alternativesToConsider.title}
+
+ Consider if you need a button that
+ triggers navigation to a URL.
+
+
+
diff --git a/packages/storybook/src/nimble/button/images/button-anatomy.svg b/packages/storybook/src/nimble/button/images/button-anatomy.svg
new file mode 100644
index 0000000000..976d29419a
--- /dev/null
+++ b/packages/storybook/src/nimble/button/images/button-anatomy.svg
@@ -0,0 +1,64 @@
+