Eseninia Components

Buttons

Stylish, interactive buttons with built-in hover/active states and accessibility features.

View examples

Input Fields

Clean text/number inputs with validation, error states, and responsive sizing.

View examples

Navigation

Responsive navigation bars, drawers, dropdown menus, and breadcrumbs.

View examples

Code Examples


<template>
  <es-button type="primary">Primary</es-button>
  <es-button @click="handleClick">Default</es-button>
  <es-button disabled>Disabled</es-button>
</template>


function ButtonExamples() {
  return (
    <div>
      <EsButton type="primary">Primary</EsButton>
      <EsButton onClick={() => alert('Clicked!')}>Default</EsButton>
      <EsButton disabled>Disabled</EsButton>
    </div>
  );
}


{#example}
  <EsButton type="primary">Primary</EsButton>
  <EsButton on:click={() => alert('Hello!')}>Default</EsButton>
  <EsButton disabled>Disabled</EsButton>
{/example}

Cards

Standard Card

Light background with subtle shadow

Elevated Card

Subtle elevation for visual hierarchy

Component API

Each component exports a clear API with props, slots, and event handlers. View full component API in our documentation →

Buttons

type: string (primary | secondary)

disabled: boolean

@click: function

Cards

variant: string (standard | elevated)

@slot: default

Design System Components

Buttons

Input Fields

Navigation

Code Examples

Cards

Standard Card

Elevated Card

Component API

Buttons

Cards