Clinician Initials Button

Guidance

When to use the clinician initials button component

• Account. Use the clinician initials button as an anchor for a menu, like in the CDS Console.

When to consider something else

• If the action is not related to the user’s account. Use a link or a basic button instead.

User Interface guidance

• Suggested Size Specifications:
  • width: 33.3px
  • height: 33.3px
  • Use rem equivalent

Usability guidance

• Use the Clinician Initials Button With Initials variant when clinician initials are available.
• Use the Clinician Initials Button With No Initials variant when clinician initials are not available.
• Avoid using more than one Clinician Initials Button on a page
• Use upper-case capitalization for initials.
• Keep initials to two characters maximum. Characters should pull from the first letter of the clinician’s first name, and first letter of the clinician’s last name. If more than two characters are provided, only the first two characters will be used (first letter of first and last name).

Accessibility

• Buttons should display a visible focus state when users tab to them.
• Screen readers handle buttons and links differently. When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

Using the button component

• The component preview and component code demonstrate how to use the Clinician Initials Button element. To use a button style on a link, add the usa-button class to your link.

• The default variant is a white button with dark text. Add the ‘dark’ property to use the dark variant which is a dark button with white text.

• Use the browser-native disabled attribute for any disabled button. Don’t use usa-button–disabled, which is intended only for debugging and prototyping.

Clinician Initials Icon variants