How to use EthioWDS

Learn the fundamental concepts and patterns for working with EthioWDS components.

Basic component usage

All EthioWDS components follow a consistent pattern. Use the same structure and class names across your project so that styling and behavior stay consistent. Components are designed to work together—forms, buttons, cards, and navigation share the same tokens and spacing.

Component variants

Many components support variants for different visual styles and contexts. For example, buttons can be primary, secondary, or outline; alerts can indicate success, warning, error, or info. Choose the variant that best fits the content and the user's task.

Ethiopian localization

EthioWDS includes support for Ethiopian languages and cultural patterns. Use the appropriate labels, placeholders, and direction settings for Amharic and other local languages. Date and number formatting can follow local conventions where needed.

Accessibility

All components are built with accessibility in mind:

• Proper semantics and ARIA attributes where needed
• Keyboard navigation support
• Screen reader compatibility
• Focus management
• Color contrast compliance

Customization

Customize components using design tokens—colors, typography, spacing—or by overriding styles. The design system is intended to be adapted to your brand while keeping consistency and accessibility.