Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Toggle buttons

  • Icon-based toggle buttons group related view options together, similar to a Button Group.

    • A default view can be designated on a case by case basis depending on the primary use case for the data displayed. The default view’s button should be displayed in an active state prior to user interaction.

    • User is able to select an alternate view by selecting an inactive button, which automatically refreshes the data displayed on the page to correspond to the selected view.

    • User can exclusively select one button at a time; selecting one option deselects any other.

Responsive behavior

  • The default view should be overridden when the parent page is loaded on a mobile device or other small viewport (width TBD) to card view to optimize readability and reduce horizontal scrolling.

💕 Accessibility

TBDAccessibility considerations

  • Include appropriate ALT text for each button

  • Pressed state should not use color alone as indicator (or the difference in colors must be >=3:1 contrast - confer with Jeff to confirm)

  • Any text needs to have >=4.5:1 luminance contrast vs. background

...

Notes

  • Should we approach this component as a standalone component, or as an enhancement to the existing data table component?

  • Do we have any existing starting point in Paragon for a list view?

...