Button vs link for action

button-vs-link-for-action

In-page action (submit, cancel, dismiss, reset state on this view) → real `<button>` with explicit `type`. Navigation to another URL or route → `<a>`. Do not use a styled link as the only control for an in-page action; do not use `<div>` as a button.

Description

USWDS treats in-page actions—submit, cancel, dismiss, or reset on the current view—as real buttons with an explicit type. Navigation to another URL or route stays a link. A styled link as the only control for an in-page action, or a div posing as a button, fails. Variant loudness and primary styling belong on the actions shelf (pick_primary_action), not here.

When to use

Choosing button versus link for an action on the current page (e.g. Cancel, Save, Dismiss).

Not when

Navigation to another destination that should stay a link; button variant loudness (see pick_primary_action).

Agent hint

Use <button type=…> for in-page actions; use <a href=…> for navigation.

Pass

In-page actions use a real `<button>` with explicit `type`; navigation uses `<a>`.

Fail

A styled link is the only control for an in-page action, or `<div>` stands in for a button.

Citations

USWDS — Button

https://designsystem.digital.gov/components/button/