How to Use EthioWDS

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

Basic Component Usage

All EthioWDS components follow a consistent API pattern. Here's a basic example:

import { Button, Card, Input } from 'ethiowds';

function UserProfile() {
  return (
    <Card>
      <h3>User Profile</h3>
      <Input 
        label="Name" 
        placeholder="Enter your name"
        required 
      />
      <Input 
        label="Email" 
        type="email"
        placeholder="email@example.com"
      />
      <Button variant="primary">
        Save Profile
      </Button>
    </Card>
  );
}

Component Variants

Many components support variants for different visual styles:

// Button variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

// Alert variants
<Alert variant="success">Success message</Alert>
<Alert variant="warning">Warning message</Alert>
<Alert variant="error">Error message</Alert>
<Alert variant="info">Info message</Alert>

Ethiopian Localization

EthioWDS includes built-in support for Ethiopian languages and cultural patterns:

import { DatePicker, Input } from 'ethiowds';

function EthiopianForm() {
  return (
    <div>
      <Input 
        label="ስም" // Name in Amharic
        placeholder="ስምዎን ያስገቡ"
        dir="auto" // Automatic text direction
      />
      <DatePicker 
        label="ቀን" // Date in Amharic
        calendar="ethiopian" // Ethiopian calendar support
      />
    </div>
  );
}

Accessibility Features

All components are built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility
• Focus management
• Color contrast compliance

// Accessible modal example
<Modal 
  isOpen={isOpen}
  onClose={handleClose}
  title="User Settings"
  aria-labelledby="modal-title"
>
  <h2 id="modal-title">User Settings</h2>
  {/* Modal content */}
</Modal>

Customization

Customize components using CSS variables or props:

// Using CSS variables
<div style={{ 
  '--ethio-primary': '#1a365d',
  '--ethio-font-family': 'Noto Sans Ethiopic'
}}>
  <Button variant="primary">Custom Styled</Button>
</div>

// Using component props
<Button 
  variant="primary"
  size="lg"
  rounded="full"
  disabled={isLoading}
>
  {isLoading ? 'Loading...' : 'Submit'}
</Button>