In this challenge, you will build a versatile button component that is part of a design system. These buttons will be used across various challenges and apps found within the platform, providing consistency throughout the user interface.
- Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
- User interaction: While not needed for this challenge, buttons should be easily extended to respond to user interaction, allowing for future integration with various functions and back end systems.
- Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
- [Stretch goal] Accessibility: Buttons should meet AA standards of WCAG 2.1, including keyboard navigation and ARIA attributes for screen readers
- Icon buttons should have
aria-label
attributes since there's no visible label.
- Buttons should be focusable via the Tab button.
- Variants: Collection of buttons should have distinct visual styles corresponding to different situational needs – primary, secondary, tertiary, destructive and links.
- States: Implement and style buttons to reflect different states – normal, hover, focus, and disabled.
- Sizes: For each button style and state, we have 4 sizes – Medium, Large, Extra large and 2 Extra large
- Icons: Left icon only, right icon only, icons on both sides, or icon-only
- Identify how you can reuse and compose your CSS classes together to produce the various combinations of button variants, states, sizes, and icons.