Components
Every component is a native custom element. Click View code under any example to see exactly the markup that produced it, and use the theme dots above to preview all four themes.
Buttons
Variants: primary, secondary, outline, ghost, soft, danger, link. All have a ripple press animation.
Sizes, icons & states
| Attribute | Values | Notes |
|---|---|---|
variant | primary · secondary · outline · ghost · soft · danger · link | default primary |
size | sm · md · lg | |
icon / icon-right | icon name | icon-only when no text |
loading · disabled · block · pill | boolean | loading also settable as a JS property |
Text inputs
| Attribute | Description |
|---|---|
label, placeholder, hint, error | Field texts. Setting error turns the control red and shows the message. |
type | Any native type. password gets a show/hide toggle automatically. |
icon, suffix, clearable, maxlength | Leading icon, trailing text, clear button, live character counter. |
size, required, disabled, name | sm · md · lg / boolean flags / form field name. |
.value | JS property. Listen to native bubbling input / change events. |
Textarea
Select
Single-value dropdown with optional search, clear button, option icons and groups. Fully keyboard operable (↑ ↓ Enter Esc).
Multi-select
Multi-value dropdown with chips, search, overflow counter (max-chips) and select-all footer.
Autocomplete (autofill select)
Typeahead with debouncing, match highlighting and async sources. Set .source to an array or an async function — perfect for backend lookups.
Checkbox & Switch
Radio group
Slider
Datepicker
Calendar popup with month/year picker (click the title), today highlight and locale-aware formatting. Value is always ISO yyyy-mm-dd.
Badges & Chips
Avatar
Alerts
Progress & loading
Tabs
Animated ink bar, icon + badge support, arrow-key navigation, and a pills variant.
Accordion
Breadcrumb
Pagination
Modal & Drawer
Backdrop blur, spring entrance, Esc / backdrop close (unless persistent), body scroll-lock. Buttons inside with data-modal-close / data-drawer-close close automatically.
Toast notifications
Imperative API with four variants, auto-dismiss progress bar and slide-in animation.
Tooltip
Add data-ema-tooltip to anything, or wrap in <ema-tooltip>.
Dropdown menu
Cards & Stats
Apollo Project
Icons
50+ built-in stroke icons, used via EMA.icon('name') or the icon attribute on components.