Button

Buttons draw attention to important actions and allow users to initiate a change from a current state to a future state. Throughout InsureKidsNow.gov (IKN), we primarily follow guidance from the U.S. Web Design System (USWDS) and CMS (Centers for Medicare and Medicaid Services) to ensure our buttons are accessible, consistent and intuitive.

Styling and Color Specifications

We use brand-specific colors for our primary buttons to honor our brand identity, but other than that, we strive to follow look-and-feel guidance from USWDS. We use two main button types: Primary (solid) and Secondary (outline), with specific customizations applied to the color palette drawn from IKN brand colors.

Primary Button (Solid)

The Primary Button highlights the most important action on a page. It is typically reserved for actions that advance the user to the next step in a process, such as submitting a form.

Secondary Button (Outline)

The Secondary Button is used for less critical actions or actions that occur on the current page. It aligns functionally with the USWDS Outline button variant.

Focus State Consistency

We maintain the same focus outline color used in the standard USWDS focus style. This visual indicator ensures accessibility for keyboard users. The current IKN focus outline color is #2491FF.

Accessibility and Implementation Guidance

Proper implementation is vital because buttons and links are handled differently by assistive technology.

Button vs. Link Semantics

• Use the HTML < button > element if the function does something on the page, such as submitting a form opening a dialog or canceling an action. Keyboard users can trigger < button > elements using either the space bar or the enter key.
• Use an anchor tag < a > (link) if the function simply goes somewhere (navigation). Links are typically triggered only by the enter key.

Visible Focus State

All buttons must display a highly visible focus state when users navigate to them via keyboard. This is critical for accessibility.

Minimum Click Area

The required minimum click or tap target area for a button must be at least 44x44px to aid users with mobility limitations.

Screen Reader Clarity

Screen readers must announce the button's purpose and resulting action when focused. For icon buttons lacking visible text, an aria-label or aria-labelledby attribute must be used to provide an accessible name.

Additional Specifications

For any additional information about specifications, guidelines, accessibility and usage, please refer to the Button component on the USWDS website: