Logout button

UX Design

Considerations:

• When the user is currently on a privileged page, which would require authorization, the user might need to be redirect to a landing page afterwards. If the user is visiting a public but personalized page, the user should be redirected back to the current page.

Technology

Considerations:

• Logging out is not a regular link for navigation, because it has side effects. That is why it should perhaps be a <button> instead of an <a> element.
• The mouse cursor should probably be identical to the cursor for links.

Experiment

.example-logout-button {
  cursor: pointer;
}

.reset-button {
  display: inline;
  color: inherit;
  padding: 0;
  background-color: inherit;
  border: none;
  font: inherit;
}

.default-style-a {
  cursor: var(--nih-cursor-action-navigate, pointer);
  color: var(--nih-link-color, blue);
  text-decoration: underline;
}