Button Component
Interactive button elements with multiple variants and states
Foundation
Button component basic structure and principles
Purpose
Buttons are interactive elements that trigger actions or navigate users to different pages. They should clearly communicate the action they perform.
<button class="ey-button">button</button>
Individual button variants
Default Button
Primary
<button class="ey-button">button</button>
Secondary
<button class="ey-button__secondary">button</button>
Icon
<button class="ey-button ey-button--icon-only">
<img class="w-16" src="/assets/images/search-white.svg" />
</button>
Inverse Variants
Light Inverse
<button class="ey-button--light-inversed">button</button>
Secondary Inverse
<button class="ey-button__secondary--inversed"></button>
Large Buttons
Primary
<button class="ey-button--large"></button>
Secondary
<button class="ey-button__secondary--large"></button>
Icon
<button class="ey-button--large ey-button--icon-only">
<img class="w-24" src="/assets/images/search-white.svg" />
</button>
Small Buttons
Primary
<button class="ey-button--small"></button>
Secondary
<button class="ey-button__secondary--small"></button>
Secondary Inverse
<button class="ey-button__secondary--small--inversed"></button>
Primary
<button class="ey-button--small ey-button--icon-only">
<img class="w-12" src="/assets/images/search-white.svg" />
</button>
Success
<button class="ey-button__success"></button>
Destructive
<button class="ey-button__destructive"></button>
Loader Buttons
Primary
<button class="ey-button ey-button--loader"></button>
Secondary
<button class="ey-button__secondary ey-button--loader"></button>
Secondary Inverse
<button class="ey-button__secondary--inversed ey-button--loader"></button>