Button Design System

Overview

This design system is crafted to provide a consistent and intuitive experience for button interactions across my Medications Delivery Application.

Button Types

Primary Button: The primary button is the most prominent and is used for main actions or calls to action.

Secondary Button: Secondary buttons are used for less critical actions, providing an alternative to the primary button.

Tertiary buttons: Tertiary buttons are subtle and minimal, often used for supporting actions or as links.

Button Sizes

The button design system includes three sizes to accommodate different use cases: small, medium, and large. 

Small: Designed for compact spaces or secondary actions, the small button maintains readability while saving space.

Medium: The medium button is the default size, suitable for most use cases where balance between visibility and space is key.

Large: Large buttons are used for emphasis, typically on primary actions or where enhanced visibility is necessary.

Button States

The system incorporates four states to ensure clarity and responsiveness in user interactions: default, pressed, focused, and disabled.

Default: represents the button's standard appearance when inactive and ready for interaction.

Pressed: provides visual feedback during interaction, confirming user engagement.

Focused: highlights the button when navigated via keyboard or assistive technology, ensuring accessibility.

Disabled: indicates that the button is inactive and cannot be interacted with, using subtle styling to convey its inactive status clearly.

Accessibility

All buttons are designed to meet or exceed WCAG color contrast guidelines, ensuring they are clear and easy to use for everyone, including users with visual impairments.