Button

Buttons allow users to take actions and make choices with a single tap.

Examples

Button Variants

Button Sizes

Disabled State

Usage

HTML

<!-- Primary Button -->
<button class="ethio-btn ethio-btn-primary">
  Primary Button
</button>

<!-- Secondary Button -->
<button class="ethio-btn ethio-btn-secondary">
  Secondary Button
</button>

<!-- Outline Button -->
<button class="ethio-btn ethio-btn-outline">
  Outline Button
</button>

<!-- Button Sizes -->
<button class="ethio-btn ethio-btn-primary ethio-btn-sm">
  Small Button
</button>
<button class="ethio-btn ethio-btn-primary">
  Default Button
</button>
<button class="ethio-btn ethio-btn-primary ethio-btn-lg">
  Large Button
</button>

<!-- Disabled Button -->
<button class="ethio-btn ethio-btn-primary" disabled>
  Disabled Button
</button>

Props

Class	Type	Description
`ethio-btn-primary`	Variant	Primary action button
`ethio-btn-secondary`	Variant	Secondary action button
`ethio-btn-outline`	Variant	Outline style button
`ethio-btn-ghost`	Variant	Ghost style button
`ethio-btn-sm`	Size	Small button size
`ethio-btn-lg`	Size	Large button size

Accessibility

Buttons should have clear, actionable text
Use appropriate color contrast ratios
Ensure buttons are keyboard accessible
Provide focus states for keyboard navigation
Use aria-label for icon-only buttons