Components / Button
Button
An intentional native action with clear hierarchy and a stable loading state.
html
<button aevkoButton variant="accent" [loading]="saving()">
Save changes
</button>Installation
npx aevko-ui@latest add button --yesSource ownership
Customization
Build product variants from the local CSS, override semantic tokens at any ancestor and project start or end content that inherits currentColor.
Edit locallyThe installed template and stylesheet are application code, not a black box.
Theme semanticallyOverride
--aevko-* tokens or ordinary classes without !important.Compose freelySlots accept native elements, SVG, images or Angular components.
API reference
| Property or slot | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'outline' | 'ghost' | 'accent' | 'danger' | 'primary' | Visual hierarchy of the action. |
size | 'sm' | 'md' | 'lg' | 'md' | Control height and horizontal padding. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. |
loading | boolean | false | Disables activation, exposes aria-busy and shows a spinner. |
disabled | boolean | false | Forwards the native disabled state. |
aevkoButtonIconStart | projected slot | empty | Leading icon or custom element. |
aevkoButtonIconEnd | projected slot | empty | Trailing icon or custom element. |
Accessibility contract
Accessibility
Included behavior
- Tab focuses the native button.
- Enter and Space activate it.
- Loading disables activation, sets aria-busy and keeps the visible label.
Your responsibility
Keep a visible label or provide an accessible name for icon-only actions; choose submit only inside the intended form.