Back to componentszyra-button
Button
Token-aware action buttons for primary flows, secondary actions, and compact utility triggers.
Component preview
Explore the available states and the real library behavior for this component.
zyra-button Playground
Interactive button component with loading states, icons, and multiple variants
Controls
variant
size
loading
disabled
fullWidth
label
iconLeft
iconRight
Live Preview
Generated Code
<zyra-button variant="primary" size="md"> Button </zyra-button>
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraButton } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-button',
standalone: true,
imports: [ZyraButton],
template: `
<zyra-button variant="primary" size="md">
Save changes
</zyra-button>
`,
})
export class DemoButtonComponent {}
Variants
All the visual modes and states available for this component.
primaryHigh-emphasis CTA - use once per section
secondaryMedium-emphasis supporting action
outlineBordered variant for neutral actions
ghostText-only for low-emphasis or toolbar actions
dangerDestructive or irreversible actions
API
All inputs and configuration options for zyra-button.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'primary' | Visual style |
size | 'sm' | 'md' | 'lg' | 'md' | Height and padding scale |
disabled | boolean | false | Prevents interaction; adds muted styling |
loading | boolean | false | Shows spinner; blocks double-submit |
leftIcon | IconDefinition | - | Icon rendered before the label |
rightIcon | IconDefinition | - | Icon rendered after the label |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders as a native <button> - keyboard accessible via Tab, Enter, and Space
- loading state sets aria-busy="true" to communicate pending status to screen readers
- disabled state communicates unavailability without removing focusability
- All variants maintain a visible 2px focus ring for keyboard navigation