Gleeson Library Design System

Usage

• Platforms — Buttons can be used in LibGuides LibAnswers LibCal
• Permission level — Buttons can be used by Regular and Admin users
• Framework — The Standard button is built on the Bootstrap 3 Buttons component; the Solid Arrow button is a custom build

Content Guidelines

• Specificity — Button labels to describe the action clearly
• Action-Oriented Verbs — Use action-oriented verbs to describe what will happen when the button is clicked

Best Practices

• Colors — The Standard button only supports one color; Solid Arrow buttons can be lime orange turquoise olive red blue
• Placement — Buttons can be used in both the side navigation and main content areas of webpages

Accessibility

1. ARIA roles — ARIA roles establish the semantic meaning of an element when it does not have a default HTML element; this ensures the buttons are accessible to assistive technologies
   • role="button" is set on buttons to convey their function
2. Color contrast — Button colors and text color meet WCAG contrast guidelines
3. Keyboard navigation — Cards are navigable by keyboards and have clearly defined focus indicators